成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Michael_Lin / 2668人閱讀

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

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

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

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


    

    

    



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

可以看出，其原理是視圖都由絕對定位的覆蓋屏幕大?。梢娨暱冢┑脑貥?gòu)成，在某一時間點，只會顯示一個視圖。

固定頁腳的問題

那么，固定頁腳是一個什么問題呢？請看下圖：

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

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

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

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

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

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

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

.container{
    min-height: 100%;
}

flex-container、justify-content-center、align-items-center都是彈性盒模型的輔助class（熟悉了Flexbox就可以很快理解）。使用輔助class是因為彈性盒模型從前到后幾經(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;
}

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

實現(xiàn)固定頁腳

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

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

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

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

其他形式的嘗試？

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

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

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

結(jié)語

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

如果你也碰到過類似的需求或有過類似的想法，相信本文可以提供一點參考！

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

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

轉(zhuǎn)載請注明本文地址：http://hztianpu.com/yun/110931.html

相關(guān)文章

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

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

    番茄西紅柿 評論0 收藏2637

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

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

    AlexTuan 評論0 收藏0

  • 全新單頁JavaScript框架Amaple

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

    djfml 評論0 收藏0

  • 全新單頁JavaScript框架Amaple

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

    yanwei 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<