对于程序员来讲，布局这件事可把人给难为坏了。他们可能会求助于像element-ui、antd之类的UI框架，也可能会求助于position: absolute;之类的大招，但依然很容易“失控”。
本篇来谈一下如何通过css的几个样式来实现最常见的那种header/ footer/ aside/ main之类的布局。
示例代码
html代码：
<body>
<div id="app">
<div id="header"></div>
<div id="content">
<div id="aside"></div>
<div id="main"></div>
<div id="rside"></div>
</div>
<div id="footer"></div>
</div>
</body>
css样式
body {
margin: 0;
height: 100vh;
}
#app {
height: 100vh;
display: flex;
flex-direction: column;
}
#header,
#footer {
height: 40px;
background-color: chocolate;
}
#content {
display: flex;
height: calc(100% - 80px);
}
#aside,
#rside {
width: 300px;
background-color: antiquewhite;
}
#main {
flex: 1;
background-color: blueviolet;
}
最终的效果如下:
关键样式
上面的css样式，有下面几个关键点
height: 100vh
vh的意思是view height，100vh就是可以看见的全部高度。通过这个可以实现全屏高度。
display: flex
如果你想实现这样一个效果：左边占用固定宽度，右边占用剩余全部宽度，这可以用flex布局很容易实现。
父组件：display: flex。（如果希望实现上下布局，则加上flex-direction: column;）
左边的子组件：width: 200px
右边的子组件：flex: 1
如果给子组件设置了flex 属性，则本身的width属性会失效，并且具备flex属性的组件将占用所有剩余的空间，并按照它们的flex的值来等比例瓜分宽度（或高度）。例如，一个子组件是flex: 1，另一个子组件是flex: 2，那么它俩的宽度（或高度）的比例是1:2。
我在 熟练使用flex布局 这篇文章中，详细介绍了关于flex布局的更多用法。
calc()函数
height: calc(100% - 80px); 的意思是，高度为父组件的100% - 80px，可以实现动态计算高度的功能。
如果你不用这个calc()函数，要么就要用js去计算dom，要么就只能拍脑袋给一个大概的百分比高度，但无法完美适配其它分辨率的设备。所以这个函数还是很实用的。
更新：2021-08-20
#content元素的calc()函数的目的时占用剩余的所有空间，换成flex: 1也可以实现同样的效果。因为它的父级元素#app也是一个flex容器。
1520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
