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 ...
随机推荐
- Mysql下Limit注入方法(此方法仅适用于5.0.0<mysql<5.6.6的版本)
SQL语句类似下面这样:(此方法仅适用于5.0.0<mysql<5.6.6的版本) SELECT field FROM table WHERE id > 0 ORDER BY id ...
- char,wchar_t 长度
(测试环境:VC++6.0) char类型 wchar_t类型 类型大小(32位系统) 8位 16位 常量字符表示法 'A' L'A' 或 'A' 常量字符串表示法 'hello' L'hello' ...
- 对Tomcat部署web应用的方式总结
对Tomcat部署web应用的方式总结,常见的有以下四种: 1.[使用控制台部署] 访问Http://localhost:8080,并通过Tomcat Manager登录,进入部署界面即可. 2.[利 ...
- Python 9 进程,线程
本节内容 python GIL全局解释器锁 线程 进程 Python GIL(Global Interpreter Lock) In CPython, the global interpreter l ...
- 02、natapp的使用
使用方法 官网: https://natapp.cn 命令启动:natapp -authtoken=***************** 文档:https://natapp.cn/article/nat ...
- java.lang.Enum
参考博客链接 java枚举类型的优势在哪里? Java 枚举(enum) 详解7种常见的用法
- 【节点-添加标签】【节点-删除标签】【显示年-月-日-星期】【math算数】【正则表达式】
1.节点-添加标签 <body><div id="div1"><p id="p1">这是一个段落.</p>< ...
- mysql 8.0 ~ innodb与变量优化
一 innodb的优化 1 已完全不支持myisam引擎 2 将自增主键的计数器持久化到redo log中.每次计数器发生改变,都会将其写入到redo log中.如果数据库发生重启,InnoDB ...
- 《shiro》视频目录---1、权限管理-shiro
\day01_shiro\0323\10realm支持散列.avi;\day01_shiro\0323\1权限管理原理.avi;\day01_shiro\0323\2权限管理解决方案.avi;\day ...
- 20165325 2017-2018-2 《Java程序设计》结对编程_第二周:四则运算
20165325 2017-2018-2 <Java程序设计>结对编程_第二周:四则运算 一.码云链接 FAO项目的码云链接; 1.Git提交日志已经实现一个功能/一个bug修复的注释说明 ...