亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2021-08-04 09:16:35 來源:億速云 閱讀:124 作者:chen 欄目:web開發

本篇內容介紹了“怎么在移動Web頁面中使用CSS固定頁腳”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!

一種單頁應用的頁面結構

面向移動端的單頁應用(Single Page Web Application),從頁面代碼上來說,會使用較一般網頁不同的結構。單頁應用并不是說應用只需要一個視圖,而是說可以將組成應用的多個視圖集合在一個網頁內呈現,且在視圖之間能夠自由切換(平滑的動畫形式居多)。

我制作單頁應用使用的是一種常見方法,像下面這樣:

CSS Code復制內容到剪貼板

  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.     displaynone;   

  9.     positionabsolute;   

  10.     width: 100%;   

  11.     height: 100%;   

  12.     left: 0;   

  13.     top: 0;   

  14. }   

  15. .view-current{   

  16.     displayblock;   

  17. }  

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

那么,固定頁腳是一個什么問題呢?請看下圖:
怎么在移動Web頁面中使用CSS固定頁腳

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

那么,問題來了。參考上圖左,除了固定頁腳的效果之外,現在還要求當頁面內容較少時,頁面內容(Content)可以水平垂直居中于剩余的空間(Container)。在上述單頁應用的頁面結構中,應該如何實現呢?
方法探討
水平垂直居中與Flexbox

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

關于彈性盒模型的指南,推薦閱讀A Complete Guide to Flexbox 和Dive into Flexbox 。

應用Flexbox實現水平垂直居中可以先得到這樣的代碼(由于其他視圖不再需要,這里只保留一個視圖):

CSS Code復制內容到剪貼板

  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對應前面圖中的剩余空間(作為容器),div.content則是需要水平垂直居中的內容。對應的css是:

CSS Code復制內容到剪貼板

  1. .container{   

  2.     min-height: 100%;   

  3. }  

flex-container、justify-content-center、align-items-center都是彈性盒模型的輔助class(熟悉了Flexbox就可以很快理解)。使用輔助class是因為彈性盒模型從前到后幾經變化,兼容處理需要稍多代碼。這些輔助class的css是:

CSS Code復制內容到剪貼板

  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-contentcenter;   

  14.     justify-contentcenter;   

  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. }  

到此,水平垂直居中就完成了。
實現固定頁腳

現在加入頁腳的部分。這時候html代碼變成:

CSS Code復制內容到剪貼板

  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%;。考慮到要“為頁腳留空間”,結合傳統網頁中的固定頁腳的做法,得到完整的css:

CSS Code復制內容到剪貼板

  1. .container{   

  2.     min-height: 100%;   

  3.     margin-bottom: -120px;   

  4.     padding-bottom120px;   

  5.     -webkit-box-sizing: border-box;   

  6.     box-sizing: border-box;   

  7. }   

  8. .footer{   

  9.     height120px;  /*假定頁腳的高度為120px*/  

  10. }  

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

我也試過使用主軸為垂直方向的Flexbox來實現,但可惜經過測試,flex-direction: column;還沒有被現在的主流手機瀏覽器所支持。
傳統網頁的固定頁腳

關于傳統網頁的固定頁腳,有一個專門的站點HTML5 CSS Sticky Footer介紹了其實現方法和原理,你也可以閱讀我以前寫的簡單實現固定在頁面底部的頁腳。

“怎么在移動Web頁面中使用CSS固定頁腳”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

河南省| 诸暨市| 盈江县| 新宁县| 贵阳市| 美姑县| 兰溪市| 阳高县| 施甸县| 汶上县| 衢州市| 仲巴县| 延津县| 德钦县| 收藏| 望江县| 巴中市| 涿鹿县| 罗源县| 吉首市| 达州市| 元谋县| 尼玛县| 墨竹工卡县| 吴桥县| 阿拉善右旗| 南安市| 阳高县| 墨玉县| 宁南县| 永安市| 马公市| 渑池县| 扎兰屯市| 平陆县| 中西区| 梅州市| 桐庐县| 谢通门县| 南昌市| 陆丰市|