flex下部固定高,上部不固定,而且超过内容要滚动
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-sacle=1,user-scalable=no">
<style>
.t1{
position: fixed;
width: %;
top: ;
bottom: ;
left: ;
right: ;
display: flex;
flex-flow: column;
}
.t2{
flex: ;
overflow: auto
}
.t3{
flex: 600px;
width: %;
height: 600px;
}
</style>
</head>
<body>
<div class="t1">
<div class="t2">分所发生的法师分所发生的法师打发第三方第三方斯蒂芬斯蒂芬斯蒂芬斯蒂芬是的房顶上分所发生的法师打发第三方第三方斯蒂芬斯蒂芬斯蒂芬斯蒂芬是的房顶上打发第三方第三方斯蒂芬斯蒂芬斯蒂芬斯蒂芬是的房顶上</div>
<div class="t3">dsadsa</div>
</div>
</body>
</html>

设置了display:flex,子元素里面,一个固定了高度,另一个的默认就有了高度
有个要求:子元素只能俩个,如果是2个以上,就没效果
flex下部固定高,上部不固定,而且超过内容要滚动的更多相关文章
- 当ligerui的grid出现固定列与非固定列不在同一水平线上时,改怎么处理
当ligerui的grid出现固定列与非固定列不在同一水平线上时,如下图所示: 此时可以增加fixedCellHeight:false属性进行解决.这个属性在IE上不起作用,那么该怎么处理,可以这样处 ...
- flex盒模型实现头部尾部固定
近期做移动app.wap等站,需要头部固定在顶部,不随着内容滚动而滚动平时第一想法就是使用position:fixed;top:0;z-index:10;这样去实现但这样使用fixed之后,会在ios ...
- div在固定高的文字垂直居中
<div style='display:table; height:100px;'> <div style='display:table-cell; vertical-align: ...
- 不固定高宽的 div 水平垂直居中
<div class="father"> <div id="main"></div> </div> .fathe ...
- 上下左右居中 无固定高的div
<style type=“text/css”> #vc { display:table; background-color:#C2300B; width:500px; height:200 ...
- 会话固定攻击 - yxcms session固定漏洞
目录 会话固定攻击 e.g. yxcms session固定攻击 分析 了解更多 会话固定攻击 Session fixation attack(会话固定攻击)是利用服务器的session不变机制,借他 ...
- C++产生固定范围内的固定数量的随机数
#include<iostream> #include<ctime> #include<random> using namespace std; void knut ...
- 微信小程序 按钮固定在页面底部遮住页面显示内容问题
我们分为以下部分来解决这个问题: 第一部分:问题的表现是怎么样的? 第二部分:问题的是如何实现的? 第三部分:如何解决问题? 第一部分:问题的表现是怎么样的? 我设置了页面有0-99共100个数,但是 ...
- layui静态表格固定td宽度,table固定td宽度
正在做一个项目,要求数据表的列是不固定的,有可能是有10列,有可能是20列,第一列宽度要固定,然后我怎么设置都没有用, 这个问题困扰了我三天,后来终于百度到了, 这个博客: https://www.c ...
随机推荐
- Mark Text - 下一代所见即所得的Markdown编辑器
Mark Text 所输及所见,摒弃了众多 markdown 编辑器左边写作右边预览的写作方式,巧妙的将编辑和预览融为一体.snabbdom 作为 Mark Text 的渲染引擎,保证了极速渲染编辑页 ...
- python-文件读写操作
打开文件: f=open('test.txt',mode='r',encoding='utf-8') 参数1 文件名,若非当前路径,需指出具体路径 参数2 mode: 文件打开模式 r ...
- nth-of-type(n)
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. p:nth-of-type(2) { background:#ff0000; } 规定属于其父元素的第二个 ...
- [C++]动态规划系列之Warshall算法
/** * * @author Zen Johnny * @date 2018年3月31日 下午8:13:09 * */ package freeTest; /* [动态规划系列:Warshall算法 ...
- DAO层设计
一.类图分析 二.参考文档 ( JavaBean中DAO设计模式介绍)(附:设计源码) 三.类图设计文件 百度云盘:https://pan.baidu.com/s/1i5xaS8P[Power Des ...
- luogu P4156 [WC2016]论战捆竹竿
传送门 官方题解(证明都在这) 神仙题鸭qwq 转化模型,发现这题本质就是一个集合,每次可以加上集合里的数,问可以拼出多少不同的数 首先暴力需要膜意义下的最短路,例题戳这 然后这个暴力可以优化成N^2 ...
- python 的基础 学习 第一天
1 python 的变量 1,变量必须 由数字,字母和下划线组成 2,变量不能由数字开头,例如 :22hhh , 3,变量不能是由Python中的关键字组成. 4,变量具有可描述性,不易过长. 5,变 ...
- 🍓 react,jroll滑动删除 🍓
import React, { Component } from 'react'; import '../src/css/reset.css'; import '../src/css/delete.c ...
- G - Galactic Collegiate Programming Contest Kattis - gcpc (set使用)
题目链接: G - Galactic Collegiate Programming Contest Kattis - gcpc 题目大意:当前有n个人,一共有m次提交记录,每一次的提交包括两个数,st ...
- 20165237 2017-2018-2 《Java程序设计》第十周考试补做及编程题
20165237 2017-2018-2 <Java程序设计>第十周考试补做及编程题 知识点 1.链表是由若干个称作节点的对象组成的一种数据结构,每个节点含有一个数据和下一个节点的引用 . ...