flex 上下div固定, 中间div自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{height:100%;margin: 0;padding: 0;}
        .flex-container{height: 100%;display: flex;flex-direction: column;text-align: center;
            width: 100%;
            position: absolute;
            top: 0;
            left:0;
        }
        .flex-item:nth-child(1),.flex-item:nth-child(3){flex-grow: 0;flex-shrink: 0;background-color: #ababab;}
        .flex-item:nth-child(2){flex-grow: 1;flex-shrink: 1;background-color: #000;overflow-y: auto; color: #fff;}
        .center{position: fixed;top: 50%;left: 50%;margin-top: -10px;margin-left: -24px;}
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">top</div>
        <div class="flex-item">
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
            center<br>
        </div>
        <div class="flex-item">bottom</div>
    </div>
</body>
</html>

flex 上下div固定, 中间div自适应的更多相关文章

布局：上下两个div高度固定，中间自适应
需求:经典布局 —— 头尾固定高度中间高度自适应布局头部固定高度,宽度100%自适应父容器: 底部固定高度,宽度100%自适应父容器: 中间是主体部分,自动填满,浏览器可视区域剩余部分,内容超出则中 ...
关于div一侧固定,另一侧自适应
关于div一侧固定,另一侧自适应,从文字看出一侧固定:说明有固定长度, 一侧自适应:说明是按比例缩放 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
CSS 左边div固定，右边div自适应
有时候我们会有这样的需求,如图,aside是导航或者某些链接,右边的main是显示重要的内容,左边需要定宽,右边的main能够自适应剩余的宽度: <!DOCTYPE html PUBLIC &q ...
Flex 布局（两个div居中自适应宽度变小变一列，宽度够就是两列）
https://www.runoob.com/w3cnote/flex-grammar.html display: flex; justify-content: center; align-items ...
div中iframe高度自适应问题
网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...
div 固定宽高水平垂直居中方法
div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图情况一(单 ...
css实现高度或者宽度不固定的div元素垂直左右居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
左右两栏div布局，高度自适应
页面结构如下: <div class="container"> <div class="left"> left </div> ...
DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西得小心使用本来有一很好的关于CSS+DIV的论坛不过现在关门了甚是可 ...

随机推荐

AS3面试题个人理解
现在as3面试感觉就那几个题目来回考.有了题库,大家都看了都答上来了题目本身也就失去了考核的意义.而且题目本身也有很多偏的(不常用的)在考. 真正的面试官现在肯定也不会把笔试成绩当作标准.所谓: ...
显示定位方法，提取中间text 封装成函数的方法
tager='工作台' element=WebDriverWait(self.dr,15,0.1).until( eval("lambda x: x."+'find_element ...
SecureCRT & SecureFx 绿色破解版
租了腾讯云的服务器,是 ubuntu 版的,需要用到 SecureCRT 工具来远程链接,但是连接的只是控制台,只能输入命令操作,如果要下载文件什么的,就很麻烦,这时可以使用 SecureFx 来传输 ...
console输出选择器的问题
html代码: <input type="text" class="loginInput loginPwText gray" value="密码 ...
JDK、JRE与JVM的关系
mysql 8.0 错误The server requested authentication method unknown to the client
mysql 安装了最新版本8.0.11后创建用户并授权后,授权的用户连接数据库提示 The server requested authentication method unknown to the ...
T-SQL 逻辑控制语句 ifelse while casewhen
ifelse,如果逻辑语句有多行,用begin end 包裹 use StudentManageDB go --查询成绩 declare @cAvg int select @cAvg=avg(CSha ...
man iptables 8
IPTABLES(8) iptables 1.6.0 IPTABLES(8) NAME iptables/ip6tables — administration tool for IPv4/IPv6 p ...
svn 红叉叉图标解决方法
这个图标表示当前文件夹下的某些文件或文件夹已经被计划从版本控制中删除,或是该文件夹下某个受控的文件丢失了. 解决方法: 鼠标右键红叉小图标->->revert 更多SVN图标说明,请参考 ...

flex 上下div固定, 中间div自适应

flex 上下div固定, 中间div自适应的更多相关文章

随机推荐

热门专题