在網(wǎng)頁(yè)布局中有時(shí)會(huì)遇到頭部和尾部高度固定谷饿，而中間部分隨視窗高度變化而變化的三欄布局需求窄赋，經(jīng)過(guò)我的實(shí)驗(yàn)傅联，有兩張方法可以實(shí)現(xiàn)：
1.使用傳統(tǒng)的絕對(duì)定位布局
body{
padding: 0;
margin: 0;
}
.header{
height:100px;
}
.footer{
height:100px
}
.content{
positon:absolute;
top:100px;
bottom:100px;
}
當(dāng)content中有內(nèi)容的時(shí)候秸苗，content就會(huì)被自動(dòng)撐開撒妈；
2.使用flex布局
關(guān)鍵地方就在于footer部分的高度要用min-height來(lái)設(shè)置
body{
padding: 0;
margin: 0;
display:flex;
flex-direction:column;
height:100vh;
}
.header{
heigth:100px;
flex:0 1;
}
.content{
flex:1 0
}
.footer{
min-height: 40px;
flex:0 1;
}
