在製作頁面有這樣一種現象：當乙個html頁面中含有較少的內容時，web頁面的「footer」部分隨著飄上來，處在頁面的半腰中間，給視覺效果帶來極大的影響，讓你的頁面看上去很不好看，特別是現在寬屏越來越多，這種現象更是常見。
那麼如何將web頁面的 「footer」部分永遠固定在頁面的底部呢？注意了這裡所說的是頁尾footer永遠固定在頁面的底部，而不是永遠固定在顯示器螢幕的底部，
換句話說，就是當內容只有一點點時，web頁面顯示在瀏覽器底部，當內容高度超過瀏覽器高度時，web頁面的footer部分在頁面的底部，總而言之web頁面的footer部分永遠在頁面的底部，換句說，footer部分永遠沉底。
方法：1. html結構：
<div
id="container"
>
<
div
id="header"
>header section
div>
<
div
id="page"
class
="clearfix"
>
頁面容容部分
div>
<
div
id="footer"
>footer section
div>
div>
實現這頁尾永遠固定在頁面的底部，我們只需要四個div，其中div#container是乙個容器，在這個容器之中，我們包含了 div#header（頭部），div#page（頁面主體部分），div#footer（頁尾部分）
2. css**：
html,body #container #header #page #footer
原理：和標籤：html和body標籤中必須將高度(height)設定為「100%」,這樣我們就可以在容器上設定百分比高度，同時需要將html,body的margin和padding都移除，也就是html,body的margin和padding都為0；
div#container容器：div#container容器必須設 置乙個最小高度(min-height)為100％；這主要使他在內容很少（或沒有內容）情況下，能保持100％的高度。另外我們還需要在div#container容器中設定乙個"position:relative"以便於裡面的元素進行絕對定位後不會跑了div#container容器；
div#page容器：div#page這個容器有乙個很關鍵的設定，需要在這個容器上設定乙個padding-bottom值，而且這個值要等於（或略大於）頁尾div#footer的高度（height）值；
div#footer容器：div#footer容器必須設定乙個固定高度。div#footer還需要進行絕對定位，並且設定bottom:0；讓div#footer固定在容器div#container的底部，這樣就可以實現我們前面所說的效果，當內容只有一點時，div#footer固定在螢幕的底部（因為div#container設定了乙個min-height:100%），當內容高度超過螢幕的高度，div#footer也固定在div#container底部，也就是固定在頁面的底部。你也可以給div#footer加設乙個"width:100%"，讓他在整個頁面上得到延伸；
其他div：至於其他容器可以根據自己需求進行設定，比如說前面的div#header,div#left,div#content,div#right等。
CSS 底部固定
底部固定的兩種理解 1 無視content多高，footer始終固定在底部，隨著瀏覽器視窗高度的減小會覆蓋content內容 2 在意content高度，當瀏覽器視窗高度小於或等於content高度時，footer不去覆蓋content。相應解決方案 1 footer固定定位 footer 2 fo...
CSS實現footer固定在頁面底部
作為乙個頁面仔你一定遇到過 當乙個html頁面中含有較少的內容時，web頁面的 footer 部分隨著飄上來，處在頁面的半腰中間，給視覺效果帶來極大的影響，讓你的頁面看上去很不好看，特別是現在寬屏越來越多，這種現象更是常見。那麼如何將web頁面的 footer 部分永遠固定在頁面的底部呢？先來看下下...
html css底部自動固定底部
前端在切圖過程中，肯定遇見過這種情況。頁面結構由三個部分組成，頭部 內容 底部。當乙個頁面的內容沒撐滿螢幕時，底部是跟著內容而並列存在的。這個時候如果是大屏的話，底部下面會有多餘的空白區域，而網頁設計需求必須要底部貼近瀏覽器底部。固定定位，絕度定位都不好使。廢話不多說，直接上 實現 doctype ...