CSS方法實(shí)現(xiàn)DIV固定網(wǎng)頁(yè)底部
本文向大家描述一下如何使用CSS方式實(shí)現(xiàn)DIV固定在網(wǎng)頁(yè)底部，這個(gè)問(wèn)題如果在以前使用表格布局，并不困難，只要給頁(yè)面的最外層表格高度設(shè)置為100%就可以了，然而，在Web標(biāo)準(zhǔn)的規(guī)范中，表格的高度已經(jīng)屬于廢止的屬性，應(yīng)該避免使用，所以使用CSS方法才是明智的選擇。
DIV固定在網(wǎng)頁(yè)底部的CSS方法
首先看這樣一下問(wèn)題：“如果有一個(gè)footer層，我想讓他固定出現(xiàn)在整個(gè)頁(yè)面的最下方，不隨著頁(yè)面中的內(nèi)容而變化，CSS中要怎樣設(shè)？比如里面是一些版權(quán)信息。因?yàn)槲艺?yè)的內(nèi)容比較少，footer老跟著內(nèi)容跑到上面去，很不美觀。”
這個(gè)問(wèn)題如果在以前使用表格布局，并不困難，只要給頁(yè)面的最外層表格高度設(shè)置為100%就可以了，然而，在Web標(biāo)準(zhǔn)的規(guī)范中，表格的高度已經(jīng)屬于廢止的屬性，應(yīng)該避免使用，而且使用Web標(biāo)準(zhǔn)以后，也不在提倡使用表格布局了，那么是否有辦法使用CSS來(lái)實(shí)現(xiàn)頁(yè)面的頁(yè)腳部分固定在瀏覽器底端呢？
下面就來(lái)講解DIV固定在網(wǎng)頁(yè)底部的實(shí)現(xiàn)方法。
基本思路
首先考慮外層設(shè)置一個(gè)容器DIV，id設(shè)為#container，使他的高度為瀏覽器窗口的高度，然后將#footer這個(gè)DIV設(shè)置為#container的子DIV，并使用絕對(duì)定位的方式，使他固定到#container的底端，以實(shí)現(xiàn)希望的把DIV固定在網(wǎng)頁(yè)底部效果。
改變?yōu)g覽器的高度和寬度，可以看到Footer部分的效果。
代碼實(shí)現(xiàn)
下面先考慮HTML結(jié)構(gòu)，這個(gè)演示頁(yè)面的HTML代碼非常簡(jiǎn)單。
Html程序代碼
- <body>
- <DIVidDIVid="container">
- <DIVidDIVid="content">
- <h1>Content</h1>
- <p>請(qǐng)改變?yōu)g覽器窗口的高度，以觀察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;
- }
【編輯推薦】
- CSS絕對(duì)定位和相對(duì)定位的區(qū)別
- CSS中DIV標(biāo)簽實(shí)現(xiàn)定位單元的控制
- CSS中border和clear兩大屬性用法揭秘
- 實(shí)現(xiàn)DIV居中布局三種途徑
- 解讀DIV CSS網(wǎng)頁(yè)布局中CSS無(wú)效十個(gè)原因
