文章目录
-
- 原理说明
- 案例(原理说明)
- 案例二(回字形布局)
- 案例 (计算出中间组件的高度,剩下的百分百)
原理说明
利用flex布局,很容易实现“左右两边固定,剩余100%”的布局模式
利用flex-direction: column;样式,就很容易实现“顶部和底部固定,中间100%”的情况
要设置html,body的高度为100%;否则设置的div高度为100%是0px;
必须要保证设置的控件高度从html>body>div>....>div 需要一层一层的继承下来
案例(原理说明)
<!DOCTYPE html>
![d68259d9f3d0bfaeb85e1b32f36c94a9.png](https://img-blog.csdnimg.cn/img_convert/d68259d9f3d0bfaeb85e1b32f36c94a9.png)
案例二(回字形布局)
利用
<!DOCTYPE html>
设置html和body的高度为100%,则body的高度是显示器的高度
利用flex布局,头部和底部固定,中间设置为剩下的100%
中间部分,利用flex布局,左右两边固定,中间是剩下的100%
设置“中心”的高度为100%,则是参照父元素的高度,除去顶部和底部的高度的,剩下的100%高度
![d175509cf2fda7fd9bd3cf48180a656d.png](https://img-blog.csdnimg.cn/img_convert/d175509cf2fda7fd9bd3cf48180a656d.png)
案例 (计算出中间组件的高度,剩下的百分百)
设置html和body的高度为100%,则body的高度为显示器的高度,则子元素的高度是参考body的
头部和底部固定,计算出中间的高度
利用flex布局,左右两边固定,中间为剩下的100%
高度设置为父元素的100%;中间如果内容过多,则设置overflow:auto就会出现滚动条
<!DOCTYPE html>
文章引自
CSS flex 布局,头部和底部固定,中间出现滚动条blog.csdn.net![2372ef8c3af84c197a62fe3ae551a5f2.png](https://img-blog.csdnimg.cn/img_convert/2372ef8c3af84c197a62fe3ae551a5f2.png)