1、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><div class="parent" id="parent" style="background-color: lightgrey;"><div class="top" style="background-color: lightblue;"><p>top</p></div> <div class="middle" style="background-color: pink;"><div class="left" style="background-color: orange;"><p>left</p></div><div class="right" style="background-color: lightsalmon;"><div class="right-in"><p>right</p></div></div></div> <div class="bottom" style="background-color: lightgreen;"><p>bottom</p></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><div class="parent" id="parent" style="background-color: lightgrey;"><div class="top" style="background-color: lightblue;"><p>top</p></div> <div class="middleWrap"><div class="middle" style="background-color: pink;"><div class="left" style="background-color: orange;"><p>left</p></div><div class="right" style="background-color: lightsalmon;"><div class="right-in"><p>right</p></div></div></div> </div> <div class="bottom" style="background-color: lightgreen;"><p>bottom</p></div> </div>

?運行結果：

?

2、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><div class="parent" id="parent" style="background-color: lightgrey;"><div class="top" style="background-color: lightblue;"><p>top</p></div> <div class="middle" style="background-color: pink;"><div class="left" style="background-color: orange;"><p>left</p></div><div class="right" style="background-color: lightsalmon;"><div class="right-in"><p>right</p></div></div></div> <div class="bottom" style="background-color: lightgreen;"><p>bottom</p></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><div class="parent" id="parent" style="background-color: lightgrey;"><div class="top" style="background-color: lightblue;"><p>top</p></div> <div class="middleWrap"><div class="middle" style="background-color: pink;"><div class="left" style="background-color: orange;"><p>left</p></div><div class="rightWrap"><div class="right" style="background-color: lightsalmon;"><div class="right-in"><p>right</p></div></div> </div></div> </div><div class="bottom" style="background-color: lightgreen;"><p>bottom</p></div> </div>

運行結果：

3、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><div class="parent" id="parent" style="background-color: lightgrey;"><div class="top" style="background-color: lightblue;"><p>top</p></div> <div class="middleWrap"><div class="middle" style="background-color: pink;"><div class="left" style="background-color: orange;"><p>left</p></div> <div class="rightWrap"><div class="right" style="background-color: lightsalmon;"><div class="right-in"><p>right</p></div> </div> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"><p>bottom</p></div> </div>

?運行結果：

4、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><div class="parent" id="parent" style="background-color: lightgrey;"><div class="top" style="background-color: lightblue;"><p>top</p></div> <div class="middle" style="background-color: pink;"><div class="left" style="background-color: orange;"><p>left</p></div> <div class="right" style="background-color: lightsalmon;"><div class="right-in"><p>right</p></div> </div> </div> <div class="bottom" style="background-color: lightgreen;"><p>bottom</p></div> </div>

?運行結果：

5、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><div class="parent" id="parent" style="background-color: lightgrey;"><div class="top" style="background-color: lightblue;"><p>top</p></div> <div class="middle" style="background-color: pink;"><div class="left" style="background-color: orange;"><p>left</p></div> <div class="right" style="background-color: lightsalmon;"><div class="right-in"><p>right</p></div> </div> </div> <div class="bottom" style="background-color: lightgreen;"><p>bottom</p></div> </div>

?運行結果：

6、grid

<style> body,p{margin: 0;} body,html,.parent{height: 100%;} .parent{display: grid;grid-template-rows:50px auto 50px; } .middle{overflow:hidden;display:grid;grid-template-columns: 100px 1fr;grid-gap:20px; } .right{overflow:auto; } .right-in{height: 1000px; } </style><div class="parent" id="parent" style="background-color: lightgrey;"><div class="top" style="background-color: lightblue;"><p>top</p></div> <div class="middle" style="background-color: pink;"><div class="left" style="background-color: orange;"><p>left</p></div> <div class="right" style="background-color: lightsalmon;"><div class="right-in"><p>right</p></div> </div> </div> <div class="bottom" style="background-color: lightgreen;"><p>bottom</p></div> </div>

?運行結果：

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。