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

前面的话

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

思路一: float

【1】float + calc

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

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>

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>

【2】float + absolute + (fix)

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

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>

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>

思路二: inline-block

【1】inline-block + calc

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>

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>

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

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>

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>

思路三: table

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

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>

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>

思路四: absolute

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>

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>

思路五: flex

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

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>

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>

总结

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