【要求】
上中下佈局:當頁面高度不滿一屏的時候,footer固定在頁面的底部;當頁面高度滿一屏的時候,footer隨着頁面內容滾動。
【code實現-普通佈局方式】
// html結構
<body>
<div class='header'></div>
<div class='content'></div>
<div class='footer></div>
</body>
// css實現
/*
* 關鍵點在於:中間內容的padding-bottom值與footer的height值和margin-top的值一致
*/
body {
height: 100%;
}
.header {
height: 60px;
}
.content {
min-height: calc(100% - 60px);
box-sizing: border-box;
padding-bottom: 60px;
}
.footer {
height: 60px;
margin-top: -60px;
}
【code實現-flex佈局】
// html佈局
<body>
<div class='header'></div>
<div class='content'></div>
<div class='footer></div>
</body>
// css實現
/*
* 利用flex:1;佔據頁面剩餘高度值的特性實現
*/
body {
display: flex;
flex-direction: column;
height: 100%;
}
.head {
width: 100vw;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #aff;
}
.content {
flex: 1;
text-align: center;
background-color: #ffa;
}
.footer {
width: 100vw;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #faa;
}