html 布局满屏,CSS全屏布局的5种方式

前面的话

全屏布局在实际工作中是很常用的,比如管理系统、监控平台等。本文将介绍关于全屏布局的5种思路

思路一: float

【1】float + calc

通过calc()函数计算出.middle元素的高度,并设置子元素高度为100%

99642331_1.gif

style>body,p{margin:0;}body,html,.parent{height:100%;}.middle{overflow:hidden;height:calc(100% - 100px);}.left{float:left;width:100px;margin-right:20px;height:100%;}.right{overflow:auto;height:100%;}.right-in{height:1000px;}.top,.bottom{height:50px;}style>

99642331_1.gif

99642331_1.gif

divclass='parent'id='parent'style='background-color: lightgrey;'> divclass='top'style='background-color: lightblue;'> p>topp> div> divclass='middle'style='background-color: pink;'> divclass='left'style='background-color: orange;'> p>leftp> div> divclass='right'style='background-color: lightsalmon;'> divclass='right-in'> p>rightp> div> div> div> divclass='bottom'style='background-color: lightgreen;'> p>bottomp> div> div>

99642331_1.gif

【2】float + absolute + (fix)

通过增加结构来提高兼容性,.middle元素设置100%的高度,.top和.bottom设置absolute覆盖在.middle上

99642331_1.gif

style>body,p{margin:0;}body,html,.parent{height:100%;}.top,.bottom{position:absolute;height:50px;left:0;right:0;}.top{top:0;}.bottom{bottom:0;}.middleWrap{height:100%;overflow:hidden;}.middle{overflow:hidden;height:100%;margin:50px 0;}.left{float:left;width:100px;margin-right:20px;height:100%;}.right{overflow:auto;height:100%;}.right-in{height:1000px;}style>

99642331_1.gif

99642331_1.gif

divclass='parent'id='parent'style='background-color: lightgrey;'> divclass='top'style='background-color: lightblue;'> p>topp> div> divclass='middleWrap'> divclass='middle'style='background-color: pink;'> divclass='left'style='background-color: orange;'> p>leftp> div> divclass='right'style='background-color: lightsalmon;'> divclass='right-in'> p>rightp> div> div> div> div> divclass='bottom'style='background-color: lightgreen;'> p>bottomp> div> div>

99642331_1.gif

思路二: inline-block

【1】inline-block + calc

99642331_1.gif

style>body,p{margin:0;}body,html,.parent{height:100%;}.middle{height:calc(100% - 100px);font-size:0;}.left,.right{display:inline-block;vertical-align:top;font-size:16px;}.left{width:100px;margin-right:20px;height:100%;}.right{width:calc(100% - 120px);height:100%;overflow:auto;}.right-in{height:1000px;}.top,.bottom{height:50px;}style>

99642331_1.gif

99642331_1.gif

divclass='parent'id='parent'style='background-color: lightgrey;'> divclass='top'style='background-color: lightblue;'> p>topp> div> divclass='middle'style='background-color: pink;'> divclass='left'style='background-color: orange;'> p>leftp> div> divclass='right'style='background-color: lightsalmon;'> divclass='right-in'> p>rightp> div> div> div> divclass='bottom'style='background-color: lightgreen;'> p>bottomp> div> div>

99642331_1.gif

【2】inline-block + absolute + (fix)

99642331_1.gif

style>body,p{margin:0;}body,html,.parent{height:100%;}.top,.bottom{position:absolute;left:0;right:0;height:50px;}.top{top:0;}.bottom{bottom:0;}.middleWrap{height:100%;font-size:0;overflow:hidden;}.middle{position:relative;height:100%;margin:50px 0;overflow:hidden;}.left,.rightWrap{display:inline-block;vertical-align:top;font-size:16px;}.left{position:absolute;width:100px;margin-right:20px;height:100%;}.rightWrap{width:100%;height:100%;}.right{height:100%;margin-left:120px;overflow:auto;}.right-in{height:1000px;}style>

99642331_1.gif

99642331_1.gif

divclass='parent'id='parent'style='background-color: lightgrey;'> divclass='top'style='background-color: lightblue;'> p>topp> div> divclass='middleWrap'> divclass='middle'style='background-color: pink;'> divclass='left'style='background-color: orange;'> p>leftp> div> divclass='rightWrap'> divclass='right'style='background-color: lightsalmon;'> divclass='right-in'> p>rightp> div> div> div> div> div> divclass='bottom'style='background-color: lightgreen;'> p>bottomp> div> div>

99642331_1.gif

思路三: table

水平方向子元素的间距可以用border实现。所有浏览器都不支持给table-cell元素设置overflow属性。firefox和IE11浏览器不支持给table-cell元素的设置100%高度的子元素设置overflow属性

99642331_1.gif

style>body,p{margin:0;}body,html,.parent{height:100%;}.top,.bottom{position:absolute;width:100%;height:50px;}.bottom{bottom:0;}.middleWrap{height:100%;overflow:hidden;}.middle{width:100%;height:100%;display:table;margin:50px 0;table-layout:fixed;}.left{display:table-cell;width:120px;border-right:20px solid lightgray;}.rightWrap{display:table-cell;height:100%;}.right{height:100%;overflow:auto;}.right-in{height:1000px;}style>

99642331_1.gif

99642331_1.gif

divclass='parent'id='parent'style='background-color: lightgrey;'> divclass='top'style='background-color: lightblue;'> p>topp> div> divclass='middleWrap'> divclass='middle'style='background-color: pink;'> divclass='left'style='background-color: orange;'> p>leftp> div> divclass='rightWrap'> divclass='right'style='background-color: lightsalmon;'> divclass='right-in'> p>rightp> div> div> div> div> div> divclass='bottom'style='background-color: lightgreen;'> p>bottomp> div> div>

99642331_1.gif

思路四: absolute

99642331_1.gif

style>body,p{margin:0;}body,html,.parent{height:100%;}.top,.middle,.bottom{position:absolute;left:0;right:0;}.top{top:0;height:50px;}.bottom{bottom:0;height:50px;}.middle{top:50px;bottom:50px;}.left,.right{position:absolute;top:0;bottom:0;}.left{width:100px;}.right{left:120px;right:0;overflow:auto;}.right-in{height:1000px;}style>

99642331_1.gif

99642331_1.gif

divclass='parent'id='parent'style='background-color: lightgrey;'> divclass='top'style='background-color: lightblue;'> p>topp> div> divclass='middle'style='background-color: pink;'> divclass='left'style='background-color: orange;'> p>leftp> div> divclass='right'style='background-color: lightsalmon;'> divclass='right-in'> p>rightp> div> div> div> divclass='bottom'style='background-color: lightgreen;'> p>bottomp> div> div>

99642331_1.gif

思路五: flex

flex常用于小范围的布局,使用全屏布局时会因为性能问题,出现卡顿现象。如果要使用全屏自适应布局,则只有flex才能达到效果

99642331_1.gif

style>body,p{margin:0;}body,html,.parent{height:100%;}.parent{display:flex;flex-direction:column;}.top,.bottom{height:50px;}.middle{display:flex;flex:1;}.left{width:100px;margin-right:20px;}.right{flex:1;overflow:auto;}.right-in{height:1000px;}style>

99642331_1.gif

99642331_1.gif

divclass='parent'id='parent'style='background-color: lightgrey;'> divclass='top'style='background-color: lightblue;'> p>topp> div> divclass='middle'style='background-color: pink;'> divclass='left'style='background-color: orange;'> p>leftp> div> divclass='right'style='background-color: lightsalmon;'> divclass='right-in'> p>rightp> div> div> div> divclass='bottom'style='background-color: lightgreen;'> p>bottomp> div> div>

99642331_1.gif

总结

全屏布局实际上就是两列或三列自适应布局的扩展形式。由于实现的是全屏效果,高度实际上是固定的,所以思路并没有等高布局局限。水平方向元素之间的间距根据实际情况使用margin、padding、border都可以实现

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值