始終讓footer在底部

1.footer保持在頁面底部

需求：

我們希望footer能在窗口最底端，但是由於頁面內容太少，無法將內容區域撐開，從而在 footer 下面會留下一大塊空白

 

第一種方法：采用 flexbox布局模型 

 

（將 body 的 display 屬性設置為 flex, 然后將方向屬性設置為列, （默認是行，也就是橫向布局）；同時，將html 和 body 元素的高度設置為100%，使其充滿整個屏幕）

 

代碼：

<div id="container">
    <header>header</header>
    <section class="main">main</section>
    <footer>footer</footer>
</div>

 

 

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}
#container{
    display: flex;
    flex-direction: column;
    height: 100%;
}
header{
    background: #999;
    flex: 0 0 auto;
}
.main{
    background: orange;
    flex: 1 0 auto;
}
footer{
    background: #333;
    flex: 0 0 auto;
}

 

 

 

第二種方法：采用footer高度固定+絕對定位

（注意：footer的父層的最小高度是100%，footer設置成相對於父層位置絕對（absolute）置底（bottom：0），父層內要預留（padding-bottom）footer的高度，保證main的內容能夠全部顯示出來而不被footer遮蓋）

代碼：

<div id="container">
    <header>header</header>
    <section class="main">main</section >
    <footer>footer</footer>
</div>

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}
#container{
    /*保證footer是相對於container位置絕對定位*/
    position:relative;  
    width:100%;
    min-height:100%; 
    /*設置padding-bottom值大於等於footer的height值，以保證main的內容能夠全部顯示出來而不被footer遮蓋；*/  
    padding-bottom: 100px;  
    box-sizing: border-box;
}
header{
    width: 100%;
    height: 200px;
    background: #999;
}
.main{
    width: 100%;
    height: 200px;
    background: orange;
}
footer{
    width: 100%;
    height:100px;   /* footer的高度一定要是固定值*/ 
    position:absolute;
    bottom:0px;
    left:0px;
    background: #333;
}

 第三種：固定在網頁底部且居中

html {
height: 100%;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
position: relative;
}
#footer{
position: absolute;
left: 0;
right: 0;
bottom: 0;
color: #969696;
text-align: center;
}

 附加大佬的常用居中總結：

https://juejin.im/post/58f818bbb123db006233ab2a#heading-6