網頁布局中經常會遇到這種問題，那就是我們的網頁footer並不能呢一直停留在網頁的底部。我們一般的慣用方法就是將網頁的footer固定定位。但是如果我們將footer固定定位後，我們的網頁內容多，一屏顯示不出來時，我們的footer仍在視窗的底部，並且遮擋我們的內容，那麼我們今天的這種布局方式，就是來解決這個問題的。
html**：
"container">
頁面主體內容...
footer
*
html, body
.container
.container
::after
footer
當頁面主體內容不能撐滿一整個螢幕時，footer將會被固定在螢幕底部，底部的高度固定；
當頁面主體內容能夠撐滿一整個螢幕時，footer將會移動，在頁面的底部；
實現原理：
將頁面主體內容的底部界限向上提公升xxpx，為頁面主體內容新增乙個偽元素，與footer的高度一樣全部為xxpx，當主體內容撐滿一螢幕時，偽元素與footer重合。
完整demo位址
網頁布局流式布局
工具所用到外掛程式 masonry 是 一款非常強大的jquery動態網格布局外掛程式，可以幫助開發人員快速開發類似剪貼畫的介面效果。和css中float的效果不太一樣的地方在 於，float先水平排列，然後再垂直排列，使用masonry則垂直排列元素，然後將下乙個元素放置到網格中的下乙個開發區域。...
網頁布局 table布局
table 的特性決定了它非常適合用來做布局，並且 中的內容可以自動居中，這是之前用的特別多的一種布局方式 而且也加入了display table dispaly table cell來支援 teble 布局。1.簡單布局 1 doctype html 2 html lang en 3 head 4...
網頁布局 響應式布局
響應式布局是 乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本 media all 用於所有的裝置 screen 用於電腦螢幕,平板電腦,智慧型手機等 and not only 三個關鍵字可以選 1 head 2 style media screen 3 media screen and m...