一種單頁應用的頁面結構
面向移動端的單頁應用（Single Page Web Application），從頁面代碼上來說，會使用較一般網頁不同的結構。單頁應用并不是說應用只需要一個視圖，而是說可以將組成應用的多個視圖集合在一個網頁內呈現，且在視圖之間能夠自由切換（平滑的動畫形式居多）。
我制作單頁應用使用的是一種常見方法，像下面這樣：
可以看出，其原理是視圖都由絕對定位的覆蓋屏幕大?。梢娨暱冢┑脑貥嫵?，在某一時間點，只會顯示一個視圖。
固定頁腳的問題
那么，固定頁腳是一個什么問題呢？請看下圖：
先說說什么是固定頁腳吧。上圖右可以看到，當頁面內容較多，超出一屏的高度時，頁腳是“自然地”緊跟在內容后邊，滾動到底部時，才會看到位于最下方的頁腳。同時，上圖左可以看到，當頁面內容較少時，頁腳則直接位于屏幕最下方，剩余區域則是空白。這就是固定頁腳，它可以算是一種比較理想的“總是在它應該在的位置”的頁腳。
那么，問題來了。參考上圖左，除了固定頁腳的效果之外，現在還要求當頁面內容較少時，頁面內容（Content）可以水平垂直居中于剩余的空間（Container）。在上述單頁應用的頁面結構中，應該如何實現呢？
方法探討
水平垂直居中與Flexbox
讓我們一步一步來。先完成“水平垂直居中”。由于內容高度不確定，所以這里適合使用彈性盒模型（Flexbox）。
關于彈性盒模型的指南，推薦閱讀A Complete Guide to Flexbox 和Dive into Flexbox 。
新聞熱點
疑難解答
