亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

對(duì)“粘連”footer布局的思考和總結(jié)

Near_Li / 1238人閱讀

摘要：經(jīng)典的粘連布局參考文章鏈接在文章末尾，簡(jiǎn)單的語言總結(jié)如下經(jīng)典的粘連布局就是。當(dāng)元素比較短的時(shí)候比如小于屏幕的高度，我們期望這個(gè)元素能夠粘連在屏幕的底部。

經(jīng)典的"粘連"footer布局

參考文章鏈接在文章末尾，簡(jiǎn)單的語言總結(jié)如下：

經(jīng)典的“粘連”footer布局就是。我們有一塊內(nèi)容

。當(dāng)
的高度足夠長的時(shí)候，緊跟在
后面的元素
會(huì)跟在
元素的后面。當(dāng)
元素比較短的時(shí)候（比如小于屏幕的高度），我們期望這個(gè)
元素能夠“粘連”在屏幕的底部。如下圖所示：

當(dāng)main足夠長時(shí)

當(dāng)main比較短時(shí)

上面布局的實(shí)現(xiàn)方法在參考文章中已經(jīng)有提到。下面主要探討我們項(xiàng)目中遇到的情況：

我們需要實(shí)現(xiàn)的布局就是 按鈕“提交”所在的區(qū)域能夠自由伸縮。當(dāng)屏幕較低時(shí)，最就是“提交”按鈕和表單所在的區(qū)域接觸或者有一定的間隙。 示例圖就是下面的：

當(dāng)屏幕足夠高的時(shí)候

當(dāng)屏幕比較低的時(shí)候

上面的布局在移動(dòng)端需要考慮以下因素對(duì)布局的影響：

安卓上鍵盤彈起會(huì)對(duì)absolute和fixed產(chǎn)生影響；

我們的絕對(duì)定位的元素是使用的bottom相對(duì)于屏幕的底部定位；

為了解決以上的兩個(gè)問題的解決方案：

使用正常文檔流的元素包裹絕對(duì)定位的元素；

絕對(duì)定位元素的父級(jí)元素應(yīng)該有一個(gè)min-height防止，父級(jí)元素太低時(shí)，絕對(duì)定位元素“溢出”父級(jí)元素；(min-height >= 絕對(duì)定位元素 + bottom)；

根據(jù)“粘連”footer布局的思想，結(jié)合彈性盒布局。我們需要的這種布局可以有兩種方式，分別介紹如下：

1.使用vh單位

先來了解下vh和vw這兩個(gè)單位。

vh相對(duì)于視口的高度。視口被均分為100單位的vh。

vw相對(duì)于視口的寬度。視口被均分為100單位的vw。

上面兩個(gè)單位通俗的意義就是在css中獲取當(dāng)前屏幕的高度和寬度（不通過js計(jì)算）。

示例代碼如下：


    

    

    

        
你好

css代碼如下：

* {
    margin: 0;
    padding: 0;
}

body {
    /*主要就是這里獲取視窗口的高度*/
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}

.item1 {
    height: 100px;
    background-color: #ffffd
}

.item2 {
    height: 300px;
    background-color: #fea0a0
}

.item3 {
    /*防止絕對(duì)定位的元素溢出父級(jí)元素*/
    min-height: 30px !important;
    border: 1px solid #481eff;
    position: relative;
    height: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-height: 100%;
}

.btn-item {
    position: absolute;
    bottom: 10px;
    border: 1px solid #000;
}

以上就是完全使用css來實(shí)現(xiàn)我們項(xiàng)目中布局的方法，但是這個(gè)方法有一個(gè)很明顯的缺點(diǎn)就是vh單位的兼容性問題。兼容列表如下：

因?yàn)榧嫒菪詥栴}，純css的方法在我們的項(xiàng)目中使用還是不現(xiàn)實(shí)。但是我們想下問題的本質(zhì)：在使用彈性盒的基礎(chǔ)上，我們唯一需要做的就是知道彈性盒元素的高度（就是我們項(xiàng)目中屏幕的高度）。

2.js簡(jiǎn)單計(jì)算滿足兼容問題。

就是在dom樹渲染完成以后給body設(shè)置高度未屏幕的高度。為了避免不必要的“重繪”或者是“重排”在head標(biāo)簽中添加如下js。

var callback = function(){
    document.body.style.height=window.screen.height+"px";
};

//是否是頁面加載觸發(fā)綁定了事件
if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll) ) {
    callback();
} else {
    //DOMContentLoaded 僅支持ie9+ 和移動(dòng)端  <=ie8 使用 onreadystatechange  可以監(jiān)聽dom是否加載完畢
    document.addEventListener("DOMContentLoaded", callback);
}

使用 jQuery 或者是 Zepto 的方法，仍然在head標(biāo)簽中添加如下js。

$(function(){
    $("body").height($(window).height());
})

所以在我們的項(xiàng)目中結(jié)合彈性盒布局和添加簡(jiǎn)單的動(dòng)態(tài)js計(jì)算屏幕的高度。就可以完美實(shí)現(xiàn)我們項(xiàng)目中需要的布局。

body {
    /*使用js動(dòng)態(tài)計(jì)算就可以不使用vh單位*/
    /*min-height: 100vh;*/
    display: flex;
}
參考文章：

因?yàn)槭且粋€(gè)

cssstickyfooter.com
ryanfait.com/sticky-footer
css-tricks.com/snippets/css/sticky-footer
pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way
mystrd.at/modern-clean-css-sticky-footer

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115444.html

相關(guān)文章

  • 幾種常見的CSS布局

    摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會(huì)介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

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

  • 幾種常見的CSS布局

    摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會(huì)介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

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

  • 幾種常見的CSS布局

    摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會(huì)介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

    荊兆峰 評(píng)論0 收藏0

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

0條評(píng)論

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