兩欄三欄布局的變通


本篇幅的內容,算是上一篇的補充

三欄布局,上下高度固定,中間自適應 

1)絕對定位

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px
}
.box div{
position: absolute;
}
.head{
top:
0;
width:
100%;
height: 100px;
background: red
}
.middle{
top: 100px;
bottom: 100px;
width:
100%;
background: yellow;
overflow: auto;
}
.footer{
bottom: 0px;
background: blue;
height: 100px;
width:
100%
}
</style>
</head>

<body>
<div class="box">
<div class="head"></div>
<div class="middle">
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
<p>111<p>
</div>
<div class="footer"></div>
</div>
</body>

</html>
View Code

 2) flex布局

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.box {
display: flex;
background: red;
flex
-direction: column;
height: 100vh
}

.head {
flex:
0 0 300px;
background: #53DE30;
}

.middle {
flex:
1;
background: #B6D51E;
}

.foot {
flex:
0 0 300px;
background: #EFBD59;
}
</style>
</head>

<body>
<div class="box">
<div class="head">1</div>
<div class="middle">
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
</div>
<div class="foot">3</div>
</div>
</body>

</html>
View Code

這兩個布局,當中間的內容超過了區域的高度的時候,絕對定位的時候,直接overflow設置為auto,采用flex布局的時候,當我們內容超過容器的寬度的時候,他會自動的撐開內容區域的高度。

這里用到了一個新的屬性

height: 100vh

這個意思是,占據電腦屏幕可用的全部高度,我們沒有設置height:100%,因為這個根本無法取到這個高度,注意,是這個電腦熒幕的可用高度,而不是頁面的高度,頁面由於會出現滾動條,但是可視區域的高度,就是電腦熒幕的可用高度


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com