在常见的网站布局中，通常是如下布局结构：顶部横幅header，紧接着有左侧边栏sider，然后是右边content主体，有的还尾随着底部footer。
这里涉及到header的横向铺满视窗，sider的纵向铺满视窗剩余部分，并且多数都会固定header和sider。
对于铺满视窗：可以用vh，vw单位来描述width，height，这些单位表示视窗的占比，比如100vw就是是指宽度占满100%视窗，这里的视窗指的是浏览器内部可视区域，所以使用vw这种单位是可以窗口大小自适应的。
对于顶部header宽度铺满视窗，这个很简单，直接使用width: 100vw即可；而对于侧边栏高度铺满视窗，由于有一部分高度已经被header占用，所以需要用到CSS的计算符height: calc( 100vh - 64px ),即为视窗高度减去header占用的64px，余下部分赋予sider的height。这样就保证了sider的高度铺满剩余视窗。
说完铺满，再说固定，这个很常见，用position: fixed即实现元素相对于浏览器布局，注意这种定位方式会使元素脱离文档流。
总结：
- 铺满视窗可以使用
vh，vw单位来实现 - 固定元素可以使用
position: fixed来实现
这里有一个在线示例：在线演示
完整的代码地址见： 源代码