上下固定中間自適應佈局
1. 使用絕對定位css
對這三欄都實現絕對定位，其中中間絕對定位的位置是上下兩欄的高度，內容超出則中間部分出現流動條；html
代碼實現：佈局
<!DOCTYPE html>flex
<html lang="en">spa
<head>htm
<meta charset="UTF-8">it
<title>絕對定位實現</title>io
<style type="text/css">class
html,body,div{meta
padding:0;
margin:0;
}
.header{
position:absolute;
top:0; /*頭部絕對定位位置*/
height:100px;
width:100%;
background: red;
}
.footer{
position:absolute;
bottom:0;/*尾部絕對定位位置*/
height:100px;
width:100%;
background:yellow;
}
.main{
position:absolute;
width:100%;
top:100px; /*中間自適應部分絕對定位位置，top是頭部的高度*/
bottom:100px; /*bottom是尾部的高度*/
background: #ccc;
overflow:auto; /*超出的部分，滾動條顯示*/
}
</style>
</head>
<body>
<div class="container">
<div class="header">我是頭部</div>
<div class="main">
我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>
我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>
我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>
我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>
</div>
<div class="footer">我是尾部</div>
</div>
</body>
</html>
2. 使用flex佈局
還可使用flex佈局實現這一佈局，將flex-direction設置爲column，定義排列方向爲豎排，還需注意的是要定義頁面的總體高度爲100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex佈局實現</title>
<style type="text/css">
html,body{
padding:0;
margin:0;
height:100%; /*定義頁面總體高度爲100%，重要*/
}
.container{
display:flex; /*父元素的定義爲flex佈局*/
height:100%; /*這裏也要定義，重要*/
width:100%;
flex-direction: column; /*定義排列方向爲豎排*/
}
.header{
height:100px; /*頭部固定高度*/
background: red;
}
.footer{
height:100px; /*尾部固定高度*/
background: yellow;
}
.main{
background: #ccc;
flex:1; /*中間分配剩下的全部空間*/
overflow:auto;
}
</style>
</head>
<body>
<div class="container">
<div class="header">我是頭部</div>
<div class="main">
我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
</div>
<div class="footer">我是尾部</div>
</div>
</body>
</html>
- 1. 上下固定，中間自適應佈局
- 2. 三欄佈局（二）-------上下寬高固定，中間自適應
- 3. 上下固定中間自適應
- 4. 三列布局-中間固定倆邊自適應-和兩邊固定中間自適應佈局
- 5. 頁面佈局--上下固定中間自適應出現滾動條佈局
- 6. css自適應佈局（兩列自適應佈局+三列左右固定中間自適應+三列中間固定左右自適應）
- 7. 三欄佈局-左右寬固定,中間自適應
- 8. flex佈局兩邊固定寬 中間自適應
- 9. 兩邊固定中間自適應佈局
- 10. 三欄佈局（一）-------左右寬高固定，中間自適應
- 更多相關文章...
- • 自定義TypeHandler - MyBatis教程
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • RxJava操作符（十）自定義操作符
- • SpringBoot中properties文件不能自動提示解決方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。