上中下佈局【不滿一屏,footer固定在底部,滿一屏,footer隨頁面滾動】

【要求】

  上中下佈局:當頁面高度不滿一屏的時候,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;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章