全屏布局

全屏布局应用：管理系统、监控平台、统计平台等。
全屏布局特点：1、缩放屏幕，页面始终撑满浏览器窗口；2、滚动条控制局部区域。
下面我们来实现一种全屏布局，它的整体宽度自适应、高度固定，横向分为三栏，分别为顶栏、主内容区、底栏，顶栏与底栏定高，主内容区高度自适应。主内容区又分为左边栏和右边栏，左边栏定宽，右边栏宽高自适应。滚动条出现在右边栏。
以下介绍两种方法1、position；2、flex。
1、使用position。分为两步，第一步，确定位置，我们可以把整个页面分为上、左、右、下四大块，然后设置position:absolute，使用left、top、right、bottom对每块进行定位。第二步，设置滚动条。在需要设置滚动的right上设置overflow: auto；当right里面内容块的高度超过某个值后，right出现滚动条。戳我查看演示。
2、使用flex。flex有一个属性-flex-direction，它的值为row | row-reverse | column | column-reverse。可以使用它形成横向布局。戳我查看演示。
注意：使用flex存在浏览器兼容性问题。
设置宽高除了使用px形式，还可以使用百分比形式。
上面假定的是顶栏、底栏、左边栏设置了固定的宽或高，假如我想自适应宽（高）度呢？
自适应的话，使用position貌似做不到，因为主内容区的position定位依赖于顶栏与底栏的固定高度。我们可以使用flex来实现上述要求，还有一种Grid方法，但由于Grid在W3c中还是草案，所以也就不做介绍。
使用flex实现全屏布局内容自适应只需要把之前设定的固定宽高值删除，浏览器就会默认该元素宽高自适应。
最后，比较一下使用Position、Flex、Grid三种方案实现全屏布局：

参考网易前端微专业全屏布局。