成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

讓footer固定在頁面（視口）底部

Lemon_95 / 737人閱讀

摘要：讓固定在頁面視口底部這是一個讓網(wǎng)站固定在瀏覽器頁面內(nèi)容小于瀏覽器高度時頁面底部的技巧。如何通過用讓固定在頁面頂部。負(fù)外邊距應(yīng)該與的整體高度相等包括。沒有內(nèi)容會超出和的標(biāo)簽，除非超出內(nèi)容是通過的絕對定位。

讓footer固定在頁面（視口）底部（CSS-Sticky-Footer）

這是一個讓網(wǎng)站footer固定在瀏覽器(頁面內(nèi)容小于瀏覽器高度時)/頁面底部的技巧。由HTML和CSS實現(xiàn)，沒有令人討厭的hacks。所以這就能在所有主流瀏覽器上正常運(yùn)行（甚至包括IE5和IE6）。

如何通過用CSS讓Footer固定在頁面頂部。

在樣式表單里添加下面幾行CSS代碼。.wrapper 的負(fù)外邊距與 .footer 和 .push 的高度相等。負(fù)外邊距應(yīng)該與footer的整體高度相等（包括padding、border）。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* 如果你不需要考慮IE6，則可以把這行與下一行代碼刪除 */
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}

按照此 HTML 結(jié)構(gòu)。沒有內(nèi)容會超出 .wrapper 和 .footer 的 div 標(biāo)簽，除非超出內(nèi)容是通過CSS的絕對定位。另外，.push 的 div 標(biāo)簽也不應(yīng)該含有內(nèi)容，畢竟它是作為一個將footer“推”下去的隱藏元素。否則會與footer的內(nèi)容重疊。


    
        
    
    
        

            
Your website content here.
多列布局（通過浮動）

為 .push div 添加 clear 屬性。

.footer, .push {
    clear: both;
}
height:auto!important; 和 height:100%;屬性

這兩個屬性是為了在IE6及以下的瀏覽器實現(xiàn) min-height 效果(min-height只兼容IE7及以上)。所以，當(dāng)你不需要考慮IE6時，可把這兩個屬性刪除。

因為IE6是考慮元素內(nèi)容的尺寸，而不是元素本身尺寸。在符合標(biāo)準(zhǔn)的瀏覽器中，如果元素的內(nèi)容太大，它只會超出框之外。但是在IE6中，如果元素內(nèi)容太大，則整個元素就會擴(kuò)展(包括寬和高)。即設(shè)定的width表現(xiàn)得像min-width。

完整代碼：https://github.com/JChehe/CSS-Sticky-Footer/blob/master/CSS%20Sticky%20Footer.html
參考：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111236.html

相關(guān)文章

  • 讓footer固定在頁面（視口）底部

    摘要：讓固定在頁面視口底部這是一個讓網(wǎng)站固定在瀏覽器頁面內(nèi)容小于瀏覽器高度時頁面底部的技巧。如何通過用讓固定在頁面頂部。負(fù)外邊距應(yīng)該與的整體高度相等包括。沒有內(nèi)容會超出和的標(biāo)簽，除非超出內(nèi)容是通過的絕對定位。 讓footer固定在頁面（視口）底部（CSS-Sticky-Footer） 這是一個讓網(wǎng)站footer固定在瀏覽器(頁面內(nèi)容小于瀏覽器高度時)/頁面底部的技巧。由HTML和CSS實現(xiàn)...

    liaosilzu2007 評論0 收藏0

  • Sticky Foolter 幾種實現(xiàn)方式

    摘要：但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。只需要幾行代碼就可以實現(xiàn)，而且像上面計算或添加額外的元素。 CSS實現(xiàn)Sticky Footer 什么是 Sticky Footer 所謂 Sticky Footer，并不是什么新的前端概念和技術(shù)，它指的就是一種網(wǎng)頁效果： 如果頁面內(nèi)容不足夠長時，頁腳固定在瀏覽器窗口的底部；如果內(nèi)容足夠長時，頁腳固定在頁面的最底部。但如果網(wǎng)頁內(nèi)...

    張漢慶 評論0 收藏0

  • Sticky Foolter 幾種實現(xiàn)方式

    摘要：但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。只需要幾行代碼就可以實現(xiàn)，而且像上面計算或添加額外的元素。 CSS實現(xiàn)Sticky Footer 什么是 Sticky Footer 所謂 Sticky Footer，并不是什么新的前端概念和技術(shù)，它指的就是一種網(wǎng)頁效果： 如果頁面內(nèi)容不足夠長時，頁腳固定在瀏覽器窗口的底部；如果內(nèi)容足夠長時，頁腳固定在頁面的最底部。但如果網(wǎng)頁內(nèi)...

    PrototypeZ 評論0 收藏0

  • 緊貼底部的頁腳

    摘要：這樣就可以了我們只需要四行簡單的代碼，就完美實現(xiàn)了緊貼底部的頁腳。后記上面是我總結(jié)的四種方法，如果還有什么更好的方法，歡迎共同探討參考資料總在底部的頁腳揭秘 前言 在寫前端頁面時，經(jīng)常會遇到這種情況：有一個具有塊級樣式的頁腳，當(dāng)頁面內(nèi)容足夠長時它一切正常；有的時候，由于頁面長度不夠，頁面底部的頁腳會很尷尬的跑上來；頁腳不能像我們期望中那樣緊貼在視口的最底部，而是緊跟在內(nèi)容的下方。 那么...

    greatwhole 評論0 收藏0

  • css的結(jié)構(gòu)與布局

    摘要：實際上表示視口寬度的，而不是。同樣，表示視口高度的當(dāng)視口寬度小于高度時，等于，否則等于?；诘姆椒ㄟ@種應(yīng)該算是最佳的解決辦法實現(xiàn)方法當(dāng)使用布局時，使用在水平和垂直方向都會居中。 1.自適應(yīng)內(nèi)部元素 在css中，不給元素一個height值時，元素會自適應(yīng)其內(nèi)部的元素高度，有時我們想讓元素的寬度也達(dá)到此效果，應(yīng)用場景如下。 如下當(dāng)前的這種布局，想要改成最外層的div的寬度由當(dāng)前的圖片撐開的...

    GeekQiaQia 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<