css样式：

html,body{height:100%;margin: 0;padding: 0;}

.flex-container{height: 100%;display: flex;flex-direction: column;text-align: center;}

.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;}

.center{position: fixed;top: 50%;left: 50%;margin-top: -10px;margin-left: -24px;}

html结构：

完整页面代码：

浏览器效果：

改变中间内容的高度后html：

浏览器效果：(滚动条自动消失)

改变可视区域大小后效果：

记录H5 C3的一些奇淫技巧
关于flex布局项目经常遇到上下固定中间自适应剩余高度的场景如果中间的盒子用了 flex:1; 会遇到中...
用flex实现上下固定高度，中间自适应的页面布局
css样式： html,body{height:100%;margin: 0;padding: 0;}.flex-...
移动端布局常用方法
左右固定，中间自适应（双飞翼或者圣杯布局）页面结构 1：flex布局，父盒子设置弹性盒，两端固定，中间flex:...
三列布局——flex布局
使用 flex 布局实现中间自适应两边固定的三列布局！代码效果图
css布局
简单的布局问题高度已知，三栏布局，要求左右宽度固定，中间自适应，怎么实现？
css布局
上下布局：下面固定高度，下面自适应
flex实现中间内容自适应高度
dmeo 用flex 实现中间内容自适应高度 body, html {w...
页面布局
问题：实现两边200px固定，中间自适应的布局，高度固定为400px 1.实现一：float布局浮动，绝对定位...
CSS 布局
实现三栏布局：高度固定，中间自适应，左右宽度是 300px。（div 标签的位置）布局一：圣杯布局圣杯布局和双...
移动端布局
1.百分比布局百分比布局，也叫流式布局效果：宽度自适应，高度固定。 2.Flex布局 Flex布局/弹性布局...