亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

在移動Web頁面中使用CSS固定頁腳

ACGTOFE   發(fā)布時間：2015-07-28 16:47:48   作者：梁砫   我要評論
這篇文章主要介紹了在移動Web頁面中使用CSS固定頁腳,作者推薦使用box-sizing的百分比調(diào)整方法,需要的朋友可以參考下

一種單頁應(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)用使用的是一種常見方法，像下面這樣：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <body>   
  2.     <div class="view-page view-current"></div>   
  3.     <div class="view-page"></div>   
  4.     <div class="view-page"></div>   
  5. </body>   
  6.   
  7. .view-page{   
  8.     display: none;   
  9.     position: absolute;   
  10.     width: 100%;   
  11.     height: 100%;   
  12.     left: 0;   
  13.     top: 0;   
  14. }   
  15. .view-current{   
  16.     display: block;   
  17. }  

可以看出，其原理是視圖都由絕對定位的覆蓋屏幕大小（可見視口）的元素構(gòu)成，在某一時間點(diǎn)，只會顯示一個視圖。
固定頁腳的問題

那么，固定頁腳是一個什么問題呢？請看下圖：
2015728165536806.png (380×313)

先說說什么是固定頁腳吧。上圖右可以看到，當(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)該如何實(shí)現(xiàn)呢？
方法探討
水平垂直居中與Flexbox

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

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

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <body>   
  2.     <div class="view-page view-current">   
  3.         <div class="container flex-container justify-content-center align-items-center">   
  4.             <div class="content"></div>   
  5.         </div>   
  6.     </div>   
  7. </body>  

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .container{   
  2.     min-height: 100%;   
  3. }  

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .flex-container{   
  2.     display: -webkit-box;   
  3.     display: -webkit-flexbox;   
  4.     display: -ms-flexbox;   
  5.     display: -webkit-flex;   
  6.     display: flex;   
  7. }   
  8.   
  9. .justify-content-center{   
  10.     -webkit-box-pack: center;   
  11.     -webkit-flex-pack: center;   
  12.     -ms-flex-pack: center;   
  13.     -webkit-justify-content: center;   
  14.     justify-content: center;   
  15. }   
  16.   
  17. .align-items-center{   
  18.     -webkit-box-align: center;   
  19.     -webkit-flex-align: center;   
  20.     -ms-flex-align: center;   
  21.     -webkit-align-items: center;   
  22.     align-items: center;   
  23. }  

到此，水平垂直居中就完成了。
實(shí)現(xiàn)固定頁腳

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <body>   
  2.     <div class="view-page view-current">   
  3.         <div class="container flex-container justify-content-center align-items-center">   
  4.             <div class="content"></div>   
  5.         </div>   
  6.         <div class="footer"></div>   
  7.     </div>   
  8. </body>  

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .container{   
  2.     min-height: 100%;   
  3.     margin-bottom: -120px;   
  4.     padding-bottom: 120px;   
  5.     -webkit-box-sizing: border-box;   
  6.     box-sizing: border-box;   
  7. }   
  8. .footer{   
  9.     height: 120px;  /*假定頁腳的高度為120px*/  
  10. }  

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

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

關(guān)于傳統(tǒng)網(wǎng)頁的固定頁腳，有一個專門的站點(diǎn)HTML5 CSS Sticky Footer介紹了其實(shí)現(xiàn)方法和原理，你也可以閱讀我以前寫的簡單實(shí)現(xiàn)固定在頁面底部的頁腳。
結(jié)語

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

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

相關(guān)文章

  • 前端CSS Grid 布局示例詳解

    CSS Grid 是一種二維布局系統(tǒng)，可以同時控制行和列，相比 Flex（一維布局），更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋
    2025-04-16

  • CSS Padding 和 Margin 區(qū)別全解析

    CSS 中的 padding 和 margin 是兩個非?；A(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實(shí)際項(xiàng)目中使用它們
    2025-04-07

  • CSS will-change 屬性示例詳解

    will-change 是一個 CSS 屬性，用于告訴瀏覽器某個元素在未來可能會發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧
    2025-04-07

  • CSS去除a標(biāo)簽的下劃線的幾種方法

    本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧
    2025-04-07

  • 前端高級CSS用法示例詳解

    在前端開發(fā)中，CSS（層疊樣式表）不僅是用來控制網(wǎng)頁的外觀和布局，更是實(shí)現(xiàn)復(fù)雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級,本文將
    2025-04-07

  • css中的 vertical-align與line-height作用詳解

    文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案，感興趣的朋友跟隨小編一起看看吧
    2025-03-26

  • 淺析CSS 中z - index屬性的作用及在什么情況下會失效

    z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用
    2025-03-21

  • CSS @media print 使用詳解

    文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等
    2025-03-18

  • CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)

    本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實(shí)現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起
    2025-03-10

  • 前端 CSS 動態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)

    本文介紹了Vue.js中動態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動態(tài)切換類名或樣式；通過數(shù)組語法,可以同時綁定多個類名或樣式,此外
    2025-02-26

最新評論