CSS-將footer置底

Posted on April 16, 2019 本文总阅读量次

通常一個頁面中包含三個部分：header、main-content、footer，可是當main-content中的內容不足以撐開整個頁面高度，footer下方就會出現一塊空白區域。這種情況，如果希望footer可以維持底部，整理兩種做法：

方法1. 設定main-content的最小高度為100%
方法2. 在最外部再包一層wrapper，設定期高度為100% ; 且讓footer設定為絕對定位bottom:0

方法1.設定main-content的最小高度為100%

html, body

高度為100%
main-content
最小高度為100%
上、下padding空間，作為放置header、footer的空間

header

使用絕對定位，top為0
設定z-index確保在最上方

footer

使用相對定位，top為自己的高度

<!-- html -->
<body>
    <header class='header'></header>
    <div class="main-content"></div>
    <footer class="footer"></footer>
</body>

html,body{
  height: 100%;
  /* background-color: azure; */
}
.header{
    height: 50px;
    position: absolute;
    top:0;
    z-index: 900;
}
.main-content{
    min-height: 100%;
    padding-top:50px;
    padding-bottom:50px;
}
.footer{
    position: relative;
    top: -100px;
    height: 50px;
}

方法2.在最外部再包一層wrapper

html, body

高度為100%

wrapper

最小高度為100%

footer

使用絕對定位，bottom為0

<!-- html -->
<body>
    <div class='wrapper'>
        <header class='header'></header>
        <div class="main-content"></div>
        <footer class="footer"></footer>
    </div>
</body>

html, body{
    height: 100%
}
.wrapper{
    min-height: 100%;
}
.footer{
    position: absolute;
    bottom: 0;
}