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

資訊專(zhuān)欄INFORMATION COLUMN

在移動(dòng)Web單頁(yè)應(yīng)用中實(shí)現(xiàn)固定頁(yè)腳

Michael_Lin / 2635人閱讀

摘要：考慮到要為頁(yè)腳留空間，結(jié)合傳統(tǒng)網(wǎng)頁(yè)中的固定頁(yè)腳的做法，得到完整的假定頁(yè)腳的高度為以上就是在這種條件下的固定頁(yè)腳的實(shí)現(xiàn)方法。結(jié)語(yǔ)移動(dòng)單頁(yè)應(yīng)用的頁(yè)面結(jié)構(gòu)是比較特別，所以固定頁(yè)腳這么有用的東西做起來(lái)又是一個(gè)新話(huà)題了。

一種單頁(yè)應(yīng)用的頁(yè)面結(jié)構(gòu)

面向移動(dòng)端的單頁(yè)應(yīng)用（Single Page Web Application），從頁(yè)面代碼上來(lái)說(shuō)，會(huì)使用較一般網(wǎng)頁(yè)不同的結(jié)構(gòu)。單頁(yè)應(yīng)用并不是說(shuō)應(yīng)用只需要一個(gè)視圖，而是說(shuō)可以將組成應(yīng)用的多個(gè)視圖集合在一個(gè)網(wǎng)頁(yè)內(nèi)呈現(xiàn)，且在視圖之間能夠自由切換（平滑的動(dòng)畫(huà)形式居多）。

我制作單頁(yè)應(yīng)用使用的是一種常見(jiàn)方法，像下面這樣：


    

    

    



.view-page{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.view-current{
    display: block;
}

可以看出，其原理是視圖都由絕對(duì)定位的覆蓋屏幕大?。梢?jiàn)視口）的元素構(gòu)成，在某一時(shí)間點(diǎn)，只會(huì)顯示一個(gè)視圖。

固定頁(yè)腳的問(wèn)題

那么，固定頁(yè)腳是一個(gè)什么問(wèn)題呢？請(qǐng)看下圖：

先說(shuō)說(shuō)什么是固定頁(yè)腳吧。上圖右可以看到，當(dāng)頁(yè)面內(nèi)容較多，超出一屏的高度時(shí)，頁(yè)腳是“自然地”緊跟在內(nèi)容后邊，滾動(dòng)到底部時(shí)，才會(huì)看到位于最下方的頁(yè)腳。同時(shí)，上圖左可以看到，當(dāng)頁(yè)面內(nèi)容較少時(shí)，頁(yè)腳則直接位于屏幕最下方，剩余區(qū)域則是空白。這就是固定頁(yè)腳，它可以算是一種比較理想的“總是在它應(yīng)該在的位置”的頁(yè)腳。

那么，問(wèn)題來(lái)了。參考上圖左，除了固定頁(yè)腳的效果之外，現(xiàn)在還要求當(dāng)頁(yè)面內(nèi)容較少時(shí)，頁(yè)面內(nèi)容（Content）可以水平垂直居中于剩余的空間（Container）。在上述單頁(yè)應(yīng)用的頁(yè)面結(jié)構(gòu)中，應(yīng)該如何實(shí)現(xiàn)呢？

方法探討 水平垂直居中與Flexbox

讓我們一步一步來(lái)。先完成“水平垂直居中”。由于內(nèi)容高度不確定，所以這里適合使用彈性盒模型 （Flexbox）。

關(guān)于彈性盒模型的指南，推薦閱讀A Complete Guide to Flexbox[] 。

應(yīng)用Flexbox實(shí)現(xiàn)水平垂直居中可以先得到這樣的代碼（由于其他視圖不再需要，這里只保留一個(gè)視圖）：

上面的div.container對(duì)應(yīng)前面圖中的剩余空間（作為容器），div.content則是需要水平垂直居中的內(nèi)容。對(duì)應(yīng)的css是：

.container{
    min-height: 100%;
}

flex-container、justify-content-center、align-items-center都是彈性盒模型的輔助class（熟悉了Flexbox就可以很快理解）。使用輔助class是因?yàn)閺椥院心Ｐ蛷那暗胶髱捉?jīng)變化，兼容處理需要稍多代碼。這些輔助class的css是：

.flex-container{
    display: -webkit-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.justify-content-center{
    -webkit-box-pack: center;
    -webkit-flex-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.align-items-center{
    -webkit-box-align: center;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

到此，水平垂直居中就完成了。

實(shí)現(xiàn)固定頁(yè)腳

現(xiàn)在加入頁(yè)腳的部分。這時(shí)候html代碼變成：

注意，div.view-page是絕對(duì)定位，且定義了height: 100%;，而此時(shí)div.container也定義了min-height: 100%;?？紤]到要“為頁(yè)腳留空間”，結(jié)合傳統(tǒng)網(wǎng)頁(yè)中的固定頁(yè)腳的做法，得到完整的css：

.container{
    min-height: 100%;
    margin-bottom: -120px;
    padding-bottom: 120px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.footer{
    height: 120px;  /*假定頁(yè)腳的高度為120px*/
}

以上就是在這種條件下的固定頁(yè)腳的實(shí)現(xiàn)方法。雖然最后看起來(lái)只是這樣一小段代碼，但我還是思考了相當(dāng)一段時(shí)間加上試驗(yàn)才得到。其中padding-bottom和負(fù)值的margin-bottom的結(jié)合應(yīng)用很關(guān)鍵。此外，作為移動(dòng)端的網(wǎng)頁(yè)，要想到使用box-sizing這個(gè)配合百分比會(huì)非常有用的CSS3屬性。

其他形式的嘗試？

我也試過(guò)使用主軸為垂直方向的Flexbox來(lái)實(shí)現(xiàn)，但可惜經(jīng)過(guò)測(cè)試，flex-direction: column;還沒(méi)有被現(xiàn)在的主流手機(jī)瀏覽器所支持。

傳統(tǒng)網(wǎng)頁(yè)的固定頁(yè)腳

關(guān)于傳統(tǒng)網(wǎng)頁(yè)的固定頁(yè)腳，有一個(gè)專(zhuān)門(mén)的站點(diǎn)HTML5 CSS Sticky Footer[]。

結(jié)語(yǔ)

移動(dòng)Web單頁(yè)應(yīng)用的頁(yè)面結(jié)構(gòu)是比較特別，所以固定頁(yè)腳這么有用的東西做起來(lái)又是一個(gè)新話(huà)題了。想到并試驗(yàn)成功后，我第一反應(yīng)就是趕緊記下來(lái)，真是擔(dān)心以后忘掉了還得費(fèi)勁重想...

如果你也碰到過(guò)類(lèi)似的需求或有過(guò)類(lèi)似的想法，相信本文可以提供一點(diǎn)參考！

（重新編輯自我的博客，原文地址：http://acgtofe.com/posts/2014/10/sticky-footer-for-single-page-web-app）

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

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

相關(guān)文章

  • wordpress主題 醬茄Free v1.0.0開(kāi)源版自媒體資訊博客主題模板

    摘要：主題主題醬茄開(kāi)源版自媒體資訊博客主題模板醬茄主題由醬茄開(kāi)發(fā)的一款免費(fèi)開(kāi)源的主題，主題專(zhuān)為博客資訊自媒體網(wǎng)站而設(shè)計(jì)，遵循開(kāi)源協(xié)議發(fā)布。wordpress主題 醬茄Free v1.0.0開(kāi)源版自媒體資訊博客主題模板醬茄free主題由醬茄開(kāi)發(fā)的一款免費(fèi)開(kāi)源的WordPress主題，主題專(zhuān)為WordPress博客、資訊、自媒體網(wǎng)站而設(shè)計(jì)，遵循GPL V2.0開(kāi)源協(xié)議發(fā)布。運(yùn)行環(huán)境醬茄Free主題當(dāng)前...

    番茄西紅柿 評(píng)論0 收藏2637

  • Web應(yīng)用程序如何創(chuàng)建 PDF

    摘要：在本文中，將探討如何從一個(gè)應(yīng)用程序中直接生成一個(gè)。然而，再次受到瀏覽器對(duì)和支持的限制。使用來(lái)實(shí)現(xiàn)規(guī)范嘗試使用實(shí)現(xiàn)規(guī)范實(shí)際上是創(chuàng)建了。就從應(yīng)用程序使用這些工具而言，需要在服務(wù)器上安裝它們。希望這是一個(gè)有用的工具總結(jié)，可用幫你的應(yīng)用程序創(chuàng)建。 為了保證的可讀性，本文采用意譯而非直譯。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！ 在一些場(chǎng)景下，用戶(hù)都要求一些需要的數(shù)...

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

  • 全新單頁(yè)JavaScript框架Amaple

    摘要：但目前來(lái)看，單頁(yè)應(yīng)用在技術(shù)實(shí)現(xiàn)和體驗(yàn)上還有更大的發(fā)展空間，而這就是所要推進(jìn)的。模塊化頁(yè)面模塊化單頁(yè)應(yīng)用的特點(diǎn)之一是將頁(yè)面劃分為多個(gè)模塊，跳轉(zhuǎn)時(shí)更新模塊的內(nèi)容。與其他單頁(yè)庫(kù)相比，它們的職責(zé)更清晰，也易于理解。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303);單頁(yè)Web應(yīng)用作為新一代Web模式，為用戶(hù)提供了更流暢的體驗(yàn)滿(mǎn)足感...

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

  • 全新單頁(yè)JavaScript框架Amaple

    摘要：但目前來(lái)看，單頁(yè)應(yīng)用在技術(shù)實(shí)現(xiàn)和體驗(yàn)上還有更大的發(fā)展空間，而這就是所要推進(jìn)的。模塊化頁(yè)面模塊化單頁(yè)應(yīng)用的特點(diǎn)之一是將頁(yè)面劃分為多個(gè)模塊，跳轉(zhuǎn)時(shí)更新模塊的內(nèi)容。與其他單頁(yè)庫(kù)相比，它們的職責(zé)更清晰，也易于理解。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303);單頁(yè)Web應(yīng)用作為新一代Web模式，為用戶(hù)提供了更流暢的體驗(yàn)滿(mǎn)足感...

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

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

0條評(píng)論

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