CSS方法實現DIV固定網頁底部
作者：小龍女
DIV CSS技術是網頁布局中的主流技術，那么你知道如何把DIV固定在網頁底部嗎，使用CSS方法就可以輕松解決這一問題，這里向大家詳細描述一下。
本文向大家描述一下如何使用CSS方式實現DIV固定在網頁底部，這個問題如果在以前使用表格布局，并不困難，只要給頁面的最外層表格高度設置為100%就可以了，然而，在Web標準的規范中，表格的高度已經屬于廢止的屬性，應該避免使用，所以使用CSS方法才是明智的選擇。
DIV固定在網頁底部的CSS方法
首先看這樣一下問題：“如果有一個footer層，我想讓他固定出現在整個頁面的最下方，不隨著頁面中的內容而變化，CSS中要怎樣設？比如里面是一些版權信息。因為我整頁的內容比較少，footer老跟著內容跑到上面去，很不美觀。”
這個問題如果在以前使用表格布局，并不困難，只要給頁面的最外層表格高度設置為100%就可以了，然而，在Web標準的規范中，表格的高度已經屬于廢止的屬性，應該避免使用，而且使用Web標準以后，也不在提倡使用表格布局了，那么是否有辦法使用CSS來實現頁面的頁腳部分固定在瀏覽器底端呢？
下面就來講解DIV固定在網頁底部的實現方法。
基本思路
首先考慮外層設置一個容器DIV，id設為#container，使他的高度為瀏覽器窗口的高度，然后將#footer這個DIV設置為#container的子DIV，并使用絕對定位的方式，使他固定到#container的底端，以實現希望的把DIV固定在網頁底部效果。
改變瀏覽器的高度和寬度，可以看到Footer部分的效果。
代碼實現
下面先考慮HTML結構，這個演示頁面的HTML代碼非常簡單。
Html程序代碼
- <body>
- <DIVidDIVid="container">
- <DIVidDIVid="content">
- <h1>Content</h1>
- <p>請改變瀏覽器窗口的高度，以觀察footer效果。</p>
- <p>這里是示例文字，DIV固定………，這里是示例文字。</p>
- </DIV>
- <DIVidDIVid="footer">
- <h1>Footer</h1>
- </DIV>
- </DIV>
- </body>
CSS代碼：
程序代碼
- body,html{
- margin:0;
- padding:0;
- font:12px/1.5arial;
- height:100%;
- }
- #container{
- min-height:100%;
- position:relative;
- }
- #content{
- padding:10px;
- padding-bottom:60px;
- /*20px(font-size)
- x2(line-height)+10px(padding)x2=60px*/
- }
- #footer{
- position:absolute;
- bottom:0;
- padding:10px0;
- background-color:#AAA;
- width:100%;
- }
- #footerh1{
- font:20px/2Arial;
- margin:0;
- padding:010px;
- }
【編輯推薦】
責任編輯：佚名
來源：
xlnv.net
