之前写了几个居中布局的例子,同时也提到了对于页面的全屏布局。这里详细总结两种常见的全屏布局的案例,当然,实际上还有像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
领取专属 10元无门槛券
私享最新 技术干货