一、網站底部資訊欄

在幾乎所有網站的首頁，劃到底部，可以看到展示網站資訊的資訊欄。如圖：

雖然這是很簡單的實現，但是還是記錄一下我構建的步驟

二、分析功能

1. 要有一個塊級元素；
2. 這個元素的寬度是100%，撐滿瀏覽器視窗寬度；
3. 這個元素要放在整個頁面的底部；
4. 在頁面內容高度沒有100%的時候，這個元素也要保持在底部，不能出現在其他位置；
5. 在頁面內容高於100%的時候，這個元素要保持在整個頁面的最底部，而不是視窗底部；

三、開始構建

1. 功能一、二：

footer{
	text-align: center;
	height: 60px;
	width: 100%;
	background-color: #2d2d2d;
	line-height: 60px;
	color: #F0F8FF;
}
 

2. 功能三、四、五：
這時候我們要使用定位將footer放在頁面底部，那麼，應該相對於什麼元素定位呢？
如果相對於body定位，那結果是這樣的：

這是因為body的高度只有頁面內容的高度，並不能撐滿整個視窗，那我們繼續，把body的最小高度設定為100%，並且把整個頁面的高度撐高大於100%(我們用添加了margin-bottom屬性的h1元素，填充頁面的高度)：

		body{
			background-color: #aaaa7f;
			position: relative;
			min-height: 100%;
		}
		footer{
			position: absolute;
			bottom: 0px;
			text-align: center;
			height: 60px;
			width: 100%;
			background-color: #2d2d2d;
			line-height: 60px;
			color: #F0F8FF;
		}
		h1{
			margin-bottom: 200px;
		}
 

更復雜的情況出現了，如果body裡面的元素具有margin屬性，那麼可能會發生css中margin重疊的情況，關於這個情況的解決方法，可以自行搜尋資料解決，現在，我們繼續尋找其他更簡單的方法：既然相對於body定位會出現異常，那麼，我們就嘗試相對於html定位：

		html{
			min-height: 100%;
			position: relative;
			min-height: 100%;
		}
		footer{
			position: absolute;
			bottom: 0px;
			text-align: center;
			height: 60px;
			width: 100%;
			background-color: #2d2d2d;
			line-height: 60px;
			color: #F0F8FF;
		}
 

可以看到，現在底部資訊欄乖乖的呆在頁面最底部了，並且，就算頁面內容高度小於100%：

也沒毛病。