使用CSS定位頁面的“footer”

2020-03-24 17:49:29

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

基本思路首先考慮外層設(shè)置一個容器 div ，id 設(shè)為 #container ，使他的高度為瀏覽器窗口的高度，然后將 #footer 這個 div 設(shè)置為 #container 的子 div，并使用絕對定位的方式，使他固定到 #container 的底端，以實現(xiàn)希望的效果。點擊這里察看案例頁面效果。改變?yōu)g覽器的高度和寬度，可以看到 Footer 部分的效果。代碼實現(xiàn) 下面先考慮HTML結(jié)構(gòu)，這個演示頁面的HTML代碼非常簡單。 div id="container"
div id="content"
h1 Content /h1
p 請改變?yōu)g覽器窗口的高度，以觀察footer效果。 /p
p 這里是示例文字，………，這里是示例文字。 /p
/div
div id="footer"
h1 Footer /h1
/div
/div 然后設(shè)置CSS，body,html {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
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: 10px 0;
background-color: #AAA;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
} 1：首先要給 html 和 body 元素設(shè)置高度（height屬性）為100% （第5行），這樣先保證根元素的高度撐滿整個瀏覽器窗口，然后下面才能使 #container 的高度撐滿整個瀏覽器窗口。至于為什么用同時設(shè)置 html 和 body 元素，是因為 Firefox 和 IE 認為的根元素不一樣，因此這里都給他們設(shè)置上。 2：然后把 #container 的高度也設(shè)置為 100% （第8行），但是要注意，這里使用了“min-height”屬性，而不是普通的 height 屬性，這是因為我們要考慮到，如果 #content 中的內(nèi)容如果增加了，他的高度超過了瀏覽器窗口的高度，那么如果把 #container 的高度仍然是 100%，就會導致 #footer 仍然定位在瀏器窗口的下端，從而遮蓋了 #content 中的內(nèi)容。而使用 min-height 屬性的作用就是使 #container 的高度“至少”為瀏覽器窗口的高度，而當如果它里面的內(nèi)容增加了，他的高度會也跟隨著增加，這才是我們需要的效果。但是需要說明的是，在 Firefox 和 IE7 中，支持 min-height 屬性，而 IE6 中，并不支持 min-height 屬性，但是“歪打正著”的是，IE6 中，會把 min-height 屬性解釋為 height 屬性，但是 IE6 中 height 屬性的效果卻是 min-height 本來應(yīng)該具有的效果，也就是說，在 IE6 中，子 div 的高度會撐大父 div 的高度。所以這樣正好可以實現(xiàn)在 IE6、IE7 和 Firefox 中都可以正確實現(xiàn)我們希望的效果了。 3：接下來，將 #container 設(shè)置為相對定位（第9行），目的是使他成為它里面的 #footer 的定位基準，也就是所謂的“最近的定位過的祖先元素”。 4：然后把 #foooter 設(shè)置為絕對定位（第17行），并使之貼在 #container 的最下端（第18行）。 5：但是要注意，如果當我們把 #foooter 貼在 #container 的最下端以后，他實際上已經(jīng)和上面的 #content 這個div 重疊了，為了避免覆蓋 #content 中的內(nèi)容，我們在 #contetn 中設(shè)置了下側(cè)的 padding，使 padding-bottom 的值等于 #footer 的高度（第13行），就可以保證避免覆蓋 #content 的文字了，這個高度的計算注意代碼中的注釋中給出的計算方法（第14行）。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS初學者常犯錯誤匯總

下一篇：CSS教程：overflow屬性知多少