国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

學(xué)習(xí)筆記：讓元素永久置底的幾種方案（css only）

caikeal / 1951人閱讀

摘要：我們權(quán)且把這種解決方案叫術(shù)語(yǔ)解釋顧名思義就是使用來(lái)實(shí)現(xiàn)有粘性的置底元素。下面就為大家講講幾種解決方案，以及這些解決方案的優(yōu)缺點(diǎn)和兼容性。

前言

很多同學(xué)在使用css+html寫(xiě)頁(yè)面的時(shí)候，可能會(huì)遇到這樣的場(chǎng)景：

頁(yè)面除了頭部和底部外，中間部分的內(nèi)容為空時(shí)，頁(yè)面就會(huì)出現(xiàn)底部向上頂，也就是頭部和底部黏在一起了。

最近開(kāi)發(fā)頁(yè)面，也遇到了這個(gè)問(wèn)題，經(jīng)過(guò)查閱很多文章和資料后，整理出這篇文章，希望對(duì)大家有用。

我們權(quán)且把這種解決方案叫：css sticky footer

術(shù)語(yǔ)解釋

css sticky footer 顧名思義就是使用css來(lái)實(shí)現(xiàn)有粘性的置底元素。

下面就為大家講講幾種解決方案，以及這些解決方案的優(yōu)缺點(diǎn)和兼容性。

方案一 利用margin負(fù)值和偽元素實(shí)現(xiàn)永遠(yuǎn)置底

這個(gè)方案主要是利用三個(gè)地方：

html和body元素設(shè)置高度100%；

主容器內(nèi)部設(shè)置最小高度為100%，并使用偽元素after撐開(kāi)一定高度（此高度須與置底元素高度一致），使用margin（這里設(shè)置的值也應(yīng)該與置底元素高度值一致）進(jìn)行抵消；

置底元素設(shè)置一個(gè)固定高度

代碼如下：

html



    
        
    
    
        

            this is header
        

        

            this is main
        

        
        

            this is footer

css

html,body {
    height: 100%;
}
.container {
    min-height: 100%;
    margin-bottom: -50px;
    background-color: #000;
}
.container:after {
    display: block;
    content: " ";
}
.container:after, footer {
    height: 50px;
}
footer {
    background-color: #f00;
}

搞定！就是這么簡(jiǎn)單~~~

方案預(yù)覽

http://runjs.cn/detail/de3rw5qq

方案兼容性 pc

IE 8+

Edge 12+

Firefox 2+

Chrome 4+

Safari 3.1+

Opera 10.1+

移動(dòng)端

IOS safari 3.2+

Opera mini 全線支持

Android 內(nèi)置瀏覽器 2.1+

Blackberry browser 7+

Opera Mobile 12+

Chrome for Android 53+

Firefox for Android 49 +

IE mobile 10+

方案優(yōu)缺點(diǎn) 優(yōu)點(diǎn)

兼容性較好，基本現(xiàn)代瀏覽器都是可行的，不過(guò)不兼容IE 8以下

實(shí)現(xiàn)簡(jiǎn)單，只需要簡(jiǎn)單設(shè)置根元素，主容器元素和置底元素幾個(gè)即可實(shí)現(xiàn)；

無(wú)需特殊的頁(yè)面結(jié)構(gòu)，只要設(shè)置與置底元素之間的關(guān)系即可實(shí)現(xiàn)

純css實(shí)現(xiàn)方案！

缺點(diǎn)

需要知道置底元素的高度，且不能修改；

主模塊的高度設(shè)置為100%，如果遇到不需要100%高度的場(chǎng)景，此方案就得做另外的修改；

方案一總結(jié)

總的來(lái)說(shuō)，此方案對(duì)于不需要兼容太低版本瀏覽器的場(chǎng)景是足夠用了，兼容性屬于比較好的，實(shí)現(xiàn)起來(lái)也比較方便。

方案二 利用flex特性實(shí)現(xiàn)永久置底

本方案只需要兩步：

設(shè)置主容器的display方式為flex

設(shè)置置底元素flex為1

上代碼：

html



    
        
    
    
        

            this is header
        

        

            this is container
        

        
        

            this is footer

css

html{
    height: 100%;
}
header{
    background-color: #000;
}
.container{
    min-height: 100%;
    display: flex;
    flex-direction: cloumn;
    background-color: #fff;
}
footer {
    flex: 1;
    background-color: #ff0;
}
方案預(yù)覽

http://runjs.cn/detail/rcr6etwv

方案兼容性 pc

IE 10+

Edge 12+

Firefox 28+

Chrome 21+

Safari 6.1+

Opera 12.1+

移動(dòng)端

IOS safari 7.1+

Opera mini 全線支持

Android 內(nèi)置瀏覽器 4.4+

Blackberry browser 10+

Opera Mobile 12.1+

Chrome for Android 53+

Firefox for Android 49 +

IE mobile 11+

方案優(yōu)缺點(diǎn) 優(yōu)點(diǎn)

使用了css3的新特性，彈性盒子布局，方便快捷；

更少依賴置底元素的高度，這樣置底元素的高度不需要知道就可以實(shí)現(xiàn)永久置底；

代碼實(shí)現(xiàn)量更加少。

缺點(diǎn)

顯而易見(jiàn)的就是它的兼容性了，IE陣線幾乎全軍覆沒(méi)，只剩下10和11能夠兼容；

在移動(dòng)端，要注意各種APP內(nèi)置瀏覽器對(duì)flex的支持沒(méi)那么好；

就算是移動(dòng)端，它的兼容性也可見(jiàn)一斑。

方案三，使用css的calc(),實(shí)現(xiàn)永久置底

本方案需要兩步：

主元素使用calc設(shè)置最小高度

置底元素設(shè)置固定高度

上代碼

html



    
        
        RunJS
    
    
        

            this is header
        

        

            this is container
        

        

            this is footer

css

.container {
    min-height: calc(100vh - 70px);
    background-color: #ff0;
}

footer {
    height: 50px;
    background-color: #f00;
}
方案預(yù)覽

http://runjs.cn/detail/cj5r3srq

方案兼容性 pc

IE 9+

Edge 12+

Firefox 4+

Chrome 19+

Safari 6+

Opera 15+

移動(dòng)端

IOS safari 6.1+

Opera mini 全線不支持

Android 內(nèi)置瀏覽器 4.4+

Blackberry browser 10+

Opera Mobile 37+

Chrome for Android 53+

Firefox for Android 49 +

IE mobile 10+

方案優(yōu)缺點(diǎn) 優(yōu)點(diǎn)

css代碼量極少

html結(jié)構(gòu)代碼也簡(jiǎn)單

缺點(diǎn)

兼容性差

持續(xù)更新中...敬請(qǐng)期待 參考文章

https://css-tricks.com/snippets/css/sticky-footer/

https://css-tricks.com/couple-takes-sticky-footer/

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115340.html

相關(guān)文章

  • CSS開(kāi)發(fā)

    摘要：譯十六進(jìn)制顏色揭秘原文地址原文作者譯文出自掘金翻譯計(jì)劃本文永久鏈接教程入門篇關(guān)于是一款進(jìn)行柵格布局的輔助工具，它讓開(kāi)發(fā)者擺脫了冗雜的數(shù)學(xué)計(jì)算，同時(shí)降低了樣式與結(jié)構(gòu)的耦合程度。 【譯】CSS 十六進(jìn)制顏色揭秘 原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 譯文出自：掘金翻譯計(jì)劃 本文永久鏈接：https://github.com/xitu/...

    warkiz 評(píng)論0 收藏0

  • css - 收藏集 - 掘金

    摘要：絕對(duì)底部前端掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純，可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問(wèn)題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對(duì)底部 - 前端 - 掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問(wèn)題。甚至，創(chuàng)造該CSS的人還專門成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...

    phpmatt 評(píng)論0 收藏0

  • 前端空間 - 收藏集 - 掘金

    摘要：封裝手寫(xiě)的方筆記使用檢測(cè)文件前端掘金副標(biāo)題可以做什么以及使用中會(huì)遇到的坑。目的是幫助人們用純中文指南實(shí)現(xiàn)復(fù)選框中多選功能前端掘金作者緝熙簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。 深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測(cè)試框架 Chai.js 源碼貢獻(xiàn)者之一，Chai.js 中會(huì)遇到很多異常處理...

    you_De 評(píng)論0 收藏0

  • 前端空間 - 收藏集 - 掘金

    摘要：封裝手寫(xiě)的方筆記使用檢測(cè)文件前端掘金副標(biāo)題可以做什么以及使用中會(huì)遇到的坑。目的是幫助人們用純中文指南實(shí)現(xiàn)復(fù)選框中多選功能前端掘金作者緝熙簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。 深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測(cè)試框架 Chai.js 源碼貢獻(xiàn)者之一，Chai.js 中會(huì)遇到很多異常處理...

    lwx12525 評(píng)論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.38 - 神奇的 CSS

    摘要：層疊即表示允許以多種方式來(lái)描述樣式，一個(gè)元素可以被渲染呈現(xiàn)出多種樣式。可以讓屬性的變化過(guò)程持續(xù)一段時(shí)間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個(gè)改變是立即生效的，使用后，將按一個(gè)曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

    elliott_hu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<