前面的話

全屏布局在實際工作中是很常用的，比如管理系統(tǒng)、監(jiān)控平臺等。本文將介紹關(guān)于全屏布局的5種思路

思路一: float

【1】float + calc

通過calc()函數(shù)計算出.middle元素的高度，并設(shè)置子元素高度為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)

通過增加結(jié)構(gòu)來提高兼容性，.middle元素設(shè)置100%的高度，.top和.bottom設(shè)置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實現(xiàn)。所有瀏覽器都不支持給table-cell元素設(shè)置overflow屬性。firefox和IE11瀏覽器不支持給table-cell元素的設(shè)置100%高度的子元素設(shè)置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常用于小范圍的布局，使用全屏布局時會因為性能問題，出現(xiàn)卡頓現(xiàn)象。如果要使用全屏自適應(yīng)布局，則只有flex才能達(dá)到效果

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>

總結(jié)

全屏布局實際上就是兩列或三列自適應(yīng)布局的擴(kuò)展形式。由于實現(xiàn)的是全屏效果，高度實際上是固定的，所以思路并沒有等高布局局限。水平方向元素之間的間距根據(jù)實際情況使用margin、padding、border都可以實現(xiàn)

總結(jié)

以上是生活随笔為你收集整理的html 布局满屏,CSS全屏布局的5种方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。