css定位頁面

來源:互聯網
上載者:User
CSS的4大核心基石:盒子模型、標準流、浮動、定位。只有把這些核心基礎掌握到爛熟於胸的程度,才能遊刃有餘地進行設計。

colorandy讀者提出這樣一個關於頁面配置的問題:

“如果有一個footer層,我想讓他固定出現在整個頁面的最下方,不隨著頁面中的內容而變化,CSS中要怎樣設?比如裡面是一些著作權資訊。因為我整頁的內容比較少,footer老跟著內容跑到上面去,很不美觀。”

這個問題如果在以前使用表格版面配置,並不困難,只要給頁面的最外層表格高度設定為100%就可以了,然而,在Web標準的規範中,表格的高度已經屬於廢止的屬性,應該避免使用,而且使用Web標準以後,也不在提倡使用表格版面配置了,那麼是否有辦法使用CSS來實現頁面的頁尾部分固定在瀏覽器底端呢?

下面就來講解它的實現方法。

基本思路

首先考慮外層設定一個容器div,id設為#container,使他的高度為瀏覽器視窗的高度,然後將#footer這個div設定為#container的子div,並使用絕對位置的方式,使他固定到#container的底端,以實現希望的效果。

點擊這裡察看案例頁面效果。 改變瀏覽器的高度和寬度,可以看到Footer部分的效果。

代碼實現

下面先考慮HTML結構,這個示範頁面的HTML代碼非常簡單。

123456789101112
<body><div id="container"><div id="content"><h1>Content</h1><p>請改變瀏覽器視窗的高度,以觀察footer效果。</p><p>這裡是樣本文字,………,這裡是樣本文字。</p></div><div id="footer"><h1>Footer</h1></div></div></body>

然後設定CSS,

123456789101112131415161718192021222324252627
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: 10px0;background-color: #AAA;width: 100%;}#footer h1 {font: 20px/2 Arial;margin:0;padding:010px;}

要點分析

1:首先要給html和body元素設定高度(height屬性)為100% (第5行),這樣先保證根項目的高度撐滿整個瀏覽器視窗,然後下面才能使#container的高度撐滿整個瀏覽器視窗。

至於為什麼用同時設定html和body元素,是因為Firefox和IE認為的根項目不一樣,因此這裡都給他們設定上。

2:然後把#container的高度也設定為100% (第8行),但是要注意,這裡使用了“min-height”屬性,而不是普通的height屬性,這是因為我們要考慮到,如果#content中的內容如果增加了,他的高度超過了瀏覽器視窗的高度,那麼如果把#container的高度仍然是100%,就會導致#footer仍然定位在瀏器視窗的下端,從而遮蓋了#content中的內容。

而使用min-height屬性的作用就是使#container的高度“至少”為瀏覽器視窗的高度,而當如果它裡面的內容增加了,他的高度會也跟隨著增加,這才是我們需要的效果。

但是需要說明的是,在Firefox和IE7中,支援min-height屬性,而IE6種,並不支援min-height屬性,但是“歪打正著”的是,IE 6中,會把min-height屬性解釋為height屬性,但是IE 6中height屬性的效果卻是min-height本來應該具有的效果,也就是說,在IE 6中,子div的高度會撐大父div的高度。所以這樣正好可以實現在IE6、IE7和Firefox中都可以正確實現我們希望的效果了。

3:接下來,將#container設定為相對定位(第9行),目的是使他成為它裡面的#footer的定位基準,也就是所謂的“最近的定位過的祖先元素”。

4:然後把#foooter設定為絕對位置(第17行),並使之貼在#container的最下端(第18行)。

5:但是要注意,如果當我們把#foooter貼在#container的最下端以後,他實際上已經和上面的#content這個div重疊了,為了避免覆蓋#content中的內容,我們在#contetn中設定了下側的padding,使padding-bottom的值等於#footer的高度(第13行),就可以保證避免覆蓋#content的文字了,這個高度的計算注意代碼中的注釋中給出的計算方法(第14行)。

6:剩下的就沒有更多技術需要解釋了。如果讀者對上面的解釋還不十分理解,說明您對CSS的基本概念還瞭解得不夠,先仔細把CSS的核心原理和基本概念徹底搞清楚,再來看這些代碼就是很輕鬆的了。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。