对于css全屏布局的解决方案

之前写了几个居中布局的例子，同时也提到了对于页面的全屏布局。这里详细总结两种常见的全屏布局的案例，当然，实际上还有像Grid这样的方案，但是因为目前还不稳定，只是作为W3C的一个草案，兼容性自然就差一些，这里没有作深入的探讨。

相信这样的页面布局，我们在很多后台系统上会经常用到：

用代码表示为这样的结构：

通常这种结构，我们使用比较多的是定位的方案，除此之外，还有一种Flex方案。

Position

当需要right的部分随内容自适应，并且滚动条出现在该区域的话，可以在right中嵌套inner,

对inner设置个最小高度，并且为right部分增加

position的这种方案除了ie6外，兼容性非常好，并且对于ie6也有hack技术，比如 ie6下的hack

Flex

在left,和right外层包了一层middle。

中间部分：

对于right中如果加滚动条的话，做法同前。

flex的兼容性，对ie9以下不太好，并且flex本身性能不是很好，在手机上尤其如此。

定高定宽的部分换成定百分比

如果对于上例中的定高，定宽的部分，即px换成%,top的10%相对于body。这种情形的话，上面讲的两种方案同样能够实现。代码中的px替换成%即可。

定宽后者定高的部分换成根据内容自适应

考虑如下三种方案

Position

Flex

Grid

首先，定位方案肯定是不合适的，因为px的设置就违背了根据内容自适应的思想。

另外，Grid就像开头将的，用的比较少。

重点考虑Flex方案。

核心思想就是不对top,bottom,left部分设置具体的百分比。

对比总结

从兼容性，性能，自适应方面考虑，

来源：千锋HTML5