網頁內容高度不夠時，讓footer處于頁面底部的方法

聲明：兼容要求比較高，請另尋它法，如 js 控制

HTML結構

<html>
  <body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
  </body>
</html>

CSS樣式

html{
    height: 100%;    /*保證頁面高度撐滿屏幕*/
}
body{
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
}
.header{
    height: 100px;
    background: antiquewhite;
}
.content{
    flex: 1;
    background: cadetblue;
}
.footer{
    height: 100px;
    background: darkgrey;
}

效果圖

效果圖.png
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容