1. 使用絕對定位

對這三欄都實現絕對定位，其中中間絕對定位的位置是上下兩欄的高度，內容超出則中間部分出現流動條；

代碼實現：

絕對定位實現

html,body,div{

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; /*超出的部分，滾動條顯示*/

}

我是頭部

我是中間自適應
我是中間自適應
我是中間自適應
我是中間自適應
我是中間自適應
我是中間自適應
我是中間自適應
我是中間自適應
我是中間自適應
我是中間自適應
我是中間自適應
我是中間自適應
我是中間自適應
我是中間自適應
我是中間自適應
我是中間自適應

我是中間自適應
我是中間自適應
我是中間自適應
我是中間自適應

我是中間自適應
我是中間自適應
我是中間自適應
我是中間自適應

我是中間自適應
我是中間自適應
我是中間自適應
我是中間自適應

我是尾部

2. 使用flex布局

還可以使用flex布局實現這一布局，將flex-direction設置為column，定義排列方向為豎排，還需注意的是要定義頁面的整體高度為100%

flex布局實現

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;

}

我是頭部

我是flex布局實現的中間自適應
我是flex布局實現的中間自適應

我是flex布局實現的中間自適應
我是flex布局實現的中間自適應

我是flex布局實現的中間自適應
我是flex布局實現的中間自適應

我是flex布局實現的中間自適應
我是flex布局實現的中間自適應

我是flex布局實現的中間自適應
我是flex布局實現的中間自適應

我是flex布局實現的中間自適應
我是flex布局實現的中間自適應

我是flex布局實現的中間自適應
我是flex布局實現的中間自適應

我是flex布局實現的中間自適應
我是flex布局實現的中間自適應

我是flex布局實現的中間自適應
我是flex布局實現的中間自適應

我是flex布局實現的中間自適應
我是flex布局實現的中間自適應

我是尾部

總結

以上是生活随笔為你收集整理的上下定高 中间自适应_上下固定中间自适应布局的全部內容，希望文章能夠幫你解決所遇到的問題。

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