我製作單頁應用使用的是一種常見方法，像下面這樣：
.view-page
.view-current
那麼，固定頁尾是乙個什麼問題呢？請看下圖：
先說說什麼是固定頁尾吧。上圖右可以看到，當頁面內容較多，超出一屏的高度時，頁尾是「自然地」緊跟在內容後邊，滾動到底部時，才會看到位於最下方的頁尾。同時，上圖左可以看到，當頁面內容較少時，頁尾則直接位於螢幕最下方，剩餘區域則是空白。這就是固定頁尾，它可以算是一種比較理想的「總是在它應該在的位置」的頁尾。
那麼，問題來了。參考上圖左，除了固定頁尾的效果之外，現在還要求當頁面內容較少時，頁面內容（content）可以水平垂直居中於剩餘的空間（container）。在上述單頁應用的頁面結構中，應該如何實現呢？
讓我們一步一步來。先完成「水平垂直居中」。由於內容高度不確定，所以這裡適合使用彈性盒模型（flexbox）。
關於彈性盒模型的指南，推薦閱讀a complete guide to flexbox 和dive into flexbox 。
應用flexbox實現水平垂直居中可以先得到這樣的**（由於其他檢視不再需要，這裡只保留乙個檢視）：
div.container對應前面圖中的剩餘空間（作為容器），div.content則是需要水平垂直居中的內容。對應的css是：
.containerflex-container、justify-content-center、align-items-center都是彈性盒模型的輔助class（熟悉了flexbox就可以很快理解）。使用輔助class是因為彈性盒模型從前到後幾經變化，相容處理需要稍多**。這些輔助class的css是：
.flex-container
.justify-content-center
.align-items-center
現在加入頁尾的部分。這時候html**變成：
div.view-page是絕對定位，且定義了height: 100%;，而此時div.container也定義了min-height: 100%;。考慮到要「為頁尾留空間」，結合傳統網頁中的固定頁尾的做法，得到完整的css：
.container
.footer
padding-bottom和負值的margin-bottom的結合應用很關鍵。此外，作為移動端的網頁，要想到使用box-sizing這個配合百分比會非常有用的css3屬性。
我也試過使用主軸為垂直方向的flexbox來實現，但可惜經過測試，flex-direction: column;還沒有被現在的主流手機瀏覽器所支援。
關於傳統網頁的固定頁尾，有乙個專門的站點html5 css sticky footer介紹了其實現方法和原理，你也可以閱讀我以前寫的簡單實現固定在頁面底部的頁尾。
移動web單頁應用的頁面結構是比較特別，所以固定頁尾這麼有用的東西做起來又是乙個新話題了。想到並試驗成功後，我第一反應就是趕緊記下來，真是擔心以後忘掉了還得費勁重想...
SPA 單頁面應用 單頁Web應用
正常網頁url的組成,可以請看location 物件 包含有關當前 url 的資訊。例如 如上的 url 由以下部分組成 1 https 規定了頁面採用的協議 2 mp.csdn.net 為頁面所屬的網域名稱 3 postedit index.html為讀取的檔名稱 也可以叫做入口檔案 4 name...
移動Web單頁應用開發實踐 頁面結構化
單檢視的高度控制在一屏高，這樣有利於實現檢視之間的動畫切換 在android下軟體盤彈出，可能會導致輸入區域被遮擋 mask為position absolute定位，初始為透明狀態，背景設定為白色或其他顏色，並使mask蓋在當前檢視上面 mask使用transition實現opacity 1的動畫過...
在移動Web頁面中使用CSS固定頁尾
一種單頁應用的頁面結構 面向移動端的單頁應用 single page web application 從頁面 上來說，會使用較一般網頁不同的結構。單頁應用並不是說應用只需要乙個檢視，而是說可以將組成應用的多個檢視集合在乙個網頁內呈現，且在檢視之間能夠自由切換 平滑的動畫形式居多 我製作單頁應用使用的...