css--全屏布局

enali 发布于2019-08-28 18:27 / 3148人阅读

摘要：之前写了几个居中布局的例子，同时也提到了对于页面的全屏布局。列方向进行布局占据剩余区域核心思想就是不对部分设置具体的百分比。

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

相信这样的页面布局，我们在很多后台系统上会经常用到：
用代码表示为这样的结构：

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

Position

html,body,.parent{height:100%;overflow:hidden;}
.top{position:absolute;top:0;left:0;right:0;height:100px;}
.left{position:absolute;left:0;top:100px;bottom:50px;width:200px;}
.right{position:absolute;left:200px;right:0;top:100px;bottom:50px;}
.bottom{position:absoulte;left:0;right:0;bottom:0;height:50px;}

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

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

.right .inner{min-height:1000px;}
.right{overflow:auto;}

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

Flex

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

.parent{display:flex;flex-direction:column;}//列方向进行布局
.top{height:100px;}
.bottom{height:50px;}
.middle{flex:1;}//占据剩余区域

中间部分：

.middle{flex:1;display:flex;} //作为一个容器，这里默认的，flex-direction:row
.left{width:200px;}
.right{flex:1;}

对于right中如果加滚动条的话，做法同前。
flex的兼容性，对ie9以下不太好，并且flex本身性能不是很好，在手机上尤其如此。

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

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

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

考虑如下三种方案

Position

Flex

Grid

首先，定位方案肯定是不合适的，因为px的设置就违背了根据内容自适应的思想。
另外，Grid就像开头将的，用的比较少。
重点考虑Flex方案。

.parent{display:flex;flex-direction:column;}//列方向进行布局
.middle{flex:1;display:flex;}//占据剩余区域
.right{flex:1;}

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

对比总结

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

          兼容性   性能       自适应
Position   好      好       部分自适应
Flex       较差   手机尤其   可自适应
Grid       差     较好      可适应

私有云云服务器全屏布局 css布局 css布局教程学习css布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111244.html

CSS 常用的定位和布局方法汇总(已添加源码地址)

CSS-Layout 旨在打造详尽的前端布局代码学习库（自从用了框架开发，CSS生疏了不少，所以开这个库练练手）SF不能正确解析含有中文的网址，所以某些预览链接无法跳转，请访问我的博客阅读此文常见定位方法水平居中子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。方案选择基本思路：子元素为行内元素：对父元素设置text-align:center; 定宽块状元素: 设...

loonggg 2019-08-29 12:15 评论0 收藏0
CSS 常用的定位和布局方法汇总(已添加源码地址)

CSS-Layout 旨在打造详尽的前端布局代码学习库（自从用了框架开发，CSS生疏了不少，所以开这个库练练手）SF不能正确解析含有中文的网址，所以某些预览链接无法跳转，请访问我的博客阅读此文常见定位方法水平居中子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。方案选择基本思路：子元素为行内元素：对父元素设置text-align:center; 定宽块状元素: 设...

Cympros 2019-08-05 10:58 评论0 收藏0
WebView的基本使用及相关特性

摘要：将的高度设置成将会出现如下行为的高度被设置成了固定值，这意味着相对于高度的元素大小可能不正确对于应用程序所在设备是及更早的标签将会被忽略以保证向后的兼容性不支持使用的布局宽度。 WebView 是一个显示网页内容的组件，可以显示网络上的一些在线内容并且可以作为 Web 浏览器滚动显示的内容，它使用 WebKit作为渲染引擎来显示网页，里面包括放大、缩小、执行文本搜索等进行前后导航的方法...

lucas 2019-06-25 12:51 评论0 收藏0
WebView的基本使用及相关特性

摘要：将的高度设置成将会出现如下行为的高度被设置成了固定值，这意味着相对于高度的元素大小可能不正确对于应用程序所在设备是及更早的标签将会被忽略以保证向后的兼容性不支持使用的布局宽度。 WebView 是一个显示网页内容的组件，可以显示网络上的一些在线内容并且可以作为 Web 浏览器滚动显示的内容，它使用 WebKit作为渲染引擎来显示网页，里面包括放大、缩小、执行文本搜索等进行前后导航的方法...

davidac 2019-08-05 17:16 评论0 收藏0
WebView的基本使用及相关特性

摘要：将的高度设置成将会出现如下行为的高度被设置成了固定值，这意味着相对于高度的元素大小可能不正确对于应用程序所在设备是及更早的标签将会被忽略以保证向后的兼容性不支持使用的布局宽度。 WebView 是一个显示网页内容的组件，可以显示网络上的一些在线内容并且可以作为 Web 浏览器滚动显示的内容，它使用 WebKit作为渲染引擎来显示网页，里面包括放大、缩小、执行文本搜索等进行前后导航的方法...

yuxue 2019-08-23 18:05 评论0 收藏0