將頁腳始終控制在頁面最下方的幾種方法

html和body的高度并不一定相同，在內(nèi)容少的時(shí)候，body的高度要小于html，當(dāng)然這只會(huì)出現(xiàn)在body中的內(nèi)容所占的空間高度小于瀏覽器的視口高度的時(shí)候，此時(shí)html的高度大于body的高度。網(wǎng)頁中的元素都是以body最為參考，所以有必要保持html和body的高度相同。

html,body{height:100%;}

1. 第一種方法

在body中使用兩個(gè)容器，包括網(wǎng)頁的頁腳和另外一部分（container）。設(shè)置container的高度為100%；頁腳部分使用 負(fù)外邊距 保持其總是在最下方。
css 部分:

html, body {     
    height:100%;     
}     
.fl {     
    float:left;     
    display:inline;     
}     
#container {     
    width:100%;     
    height:300px;     
    overflow:hidden;     
    height:100%;     
    border-bottom:70px #FFFFFF solid;     
}     
.aside {     
    width:30%;     
}     
.article {     
    width:70%;     
}     
#footer {     
    height:50px;     
    width:100%;     
    clear:both;     
    margin-top:-50px;     
    border-bottom:1px solid #e0e0e0;     
    border-top:1px solid #e0e0e0;     
}

html 部分

<div id="container">     
    <div id="header">     
        <div>     
            <img src="" width= height= alt="" />     
            <div>     
                <p>fddfv</p>     
                    <p>容量：<span>24M</span>/<span>2G</span></p>     
            </div>     
        </div>     
    </div>     
    <div class="aside fl"> dsfcndsjkcnsd</div>     
    <div class="article fl">cdsklcmdskcmkdslcmksdlckldsmcskl</div>     
</div>     
<div id="footer">footer</div>

2. 第二種方法:使用絕對(duì)定位

這里我們使用到了position屬性，讓我們先來回顧一下position的基礎(chǔ)用法：
position有四個(gè)參數(shù)：static | relative | absolute | fixed

  • position:static，意味元素沒有被定位，元素會(huì)出現(xiàn)在文檔本該出現(xiàn)位置，是頁面元素默認(rèn)的定位的方式，一般無需指定，除非想要覆蓋之前設(shè)置的定位。
  • position:relative,很明白，相對(duì)元素本該位置的偏移量
#nav{   
    position:relative;   
    top:15px;   
    left:20px;        
}
  • position:absolute,這時(shí)候元素已經(jīng)脫離了文檔，文檔中已經(jīng)沒有自己的本該的位置了，但我們可以通過left、bottom、left和right來規(guī)定其在文檔中位置。
#nav{   
    postion:absolute;   
    botton:0px;   
}

我們知道萬物都是相對(duì)的，元素進(jìn)行上面設(shè)置了后就保證nav元素始終保持在底部了呢？nav元素離botton為0px,是哪個(gè)為參照物呢，是父級(jí)元素還還是瀏覽器呢，其實(shí)這里分為兩種情況：

如果父級(jí)元素（父級(jí)元素的父級(jí)、父級(jí)的父級(jí)的父級(jí)......）設(shè)置postion時(shí)，則子元素此時(shí)相對(duì)的是父級(jí)的，所以當(dāng)內(nèi)容過多時(shí)，腳DIV不能被擠到底部去。

如果父級(jí)元素（父級(jí)元素的父級(jí)、父級(jí)的父級(jí)的父級(jí)......）沒有設(shè)置postion時(shí)，則子元素此時(shí)相對(duì)的是瀏覽器的，所以當(dāng)內(nèi)容過少時(shí)，腳DIV不能被擠到底部去。

好了，下面回到正題，同樣需要保持html和body的高度相同，并且body需要添加另外的一些樣式，footer需要使用絕對(duì)定位。
css代碼如下:

body{position:relative;height:auto !important;height:100%;min-height:100%;}     
  
html {     
    height:100%;     
}     
body {     
    margin:0;     
    padding:0;     
    position:relative;     
    height:auto !important;     
    height:100%;     
    min-height:100%;     
    text-align:center;     
}     
.fl {     
    float:left;     
    display:inline;     
}     
#header {     
    width:100%;     
    height:80px;     
}     
#container {     
    width:100%;     
    height:300px;     
    overflow:hidden;     
    border-bottom:#FFFFFF 60px solid;     
}     
.aside {     
    width:30%;     
}     
.article {     
    width:70%;     
}     
#footer {     
    height:50px;     
    position:absolute;     
    width:100%;     
    clear:both;     
    bottom:0;     
    left:0;     
    border-bottom:1px solid #e0e0e0;     
    border-top:1px solid #e0e0e0;     
}

html 代碼:

<div id="header">     
    <div>     
        <img src="" width= height= alt="" />     
        <div>     
            <p>fddfv</p>     
            <p>容量：<span>24M</span>/<span>2G</span></p>     
        </div>     
    </div>     
</div>     
<div id="container" style="border-bottom:#FFFFFF 60px solid;">     
    <div class="aside fl"> dsfcndsjkcnsd</div>     
    <div class="article fl">cdsklcmdskcmkdslcmksdlckldsmcskl</div>     
</div>     
<div id="footer">footer</div>

3. 第三種方法:采用flexbox

flexbox——CSS3提供的一種先進(jìn)布局模型，旨在建立具有適應(yīng)性的布局。如果你對(duì) flexbox 還不怎么熟悉，文章最后有一些擴(kuò)展閱讀鏈接，可以幫助你了解 flexbox。

我們的頁面應(yīng)該具備 Header、主體內(nèi)容區(qū)域和 Footer，下面是該頁面的 HTML

<body>
    <header>...</header>
    <section class="main-content">...</section>
    <footer>...</footer>
</body>

為了啟用 flex模式，我們將 body 的 display 屬性設(shè)置為 flex, 然后將方向?qū)傩栽O(shè)置為列, （默認(rèn)是行，也就是橫向布局）。同時(shí)，將html 和 body 元素的高度設(shè)置為100%，使其充滿整個(gè)屏幕。

html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

現(xiàn)在，我們需要調(diào)整各個(gè)區(qū)域占用的頁面空間，我們將通過flex 屬性來達(dá)到這一目的，該屬性實(shí)際包含了三個(gè)屬性，分別是：

  • flex-grow：元素在同一容器中對(duì)可分配空間的分配比率，及擴(kuò)展比率
  • flex-shrink：如果空間不足，元素的收縮比率
  • flex-basis：元素的伸縮基準(zhǔn)值

我們希望 header 和footer 只占用他們應(yīng)該占用的空間，將剩余的空間全部交給主體內(nèi)容區(qū)域

header{
   /* 我們希望 header 采用固定的高度，只占用必須的空間 */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

.main-content{
   /* 將 flex-grow 設(shè)置為1，該元素會(huì)占用全部可使用空間 
      而其他元素該屬性值為0，因此不會(huì)得到多余的空間*/
   /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 1 0 auto;
}

footer{
   /* 和 header 一樣，footer 也采用固定高度*/
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

這樣footer 會(huì)始終顯示在頁面的最底部。

4. 總結(jié)

如你說見，如果是從零開始構(gòu)建布局，flexbox 將會(huì)是你的得力助手。除了極少數(shù)的例外，所有的主流瀏覽器都支持 flexbox，就 IE 來說，IE9以后的版本都是支持的。
下面是一些學(xué)習(xí) flexbox 布局模型不錯(cuò)的教程和速查表

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,209評(píng)論 1贊 92
  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    wzhiq896閱讀 2,138評(píng)論 0贊 2
  • 移動(dòng)開發(fā)基本知識(shí)點(diǎn) 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,751評(píng)論 0贊 6
  • 收聽音頻,戳鏈接,舊號(hào)itclan已暫停使用,歡迎關(guān)注微信itclanCoder公眾號(hào)可收聽更多音頻 前言 關(guān)于網(wǎng)...
    itclanCoder閱讀 8,363評(píng)論 3贊 30
  • CSS定位 CSS浮動(dòng) 定位 當(dāng)position 設(shè)置為static的時(shí)候 設(shè)置left 、right 不管用。 ...
    雪_晟閱讀 202評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容