網頁製作Webjx文章簡介:CSS的簡單在於它易學,CSS的困難在於尋找更好的解決方案。在CSS的世界裡,似乎沒有完美這種說法。所以,現在介紹的CSS絕對底部,只是目前個人見過的方案中比較完美的吧。 CSS的簡單在於它易學,CSS的困難在於尋找更好的解決方案。在CSS的世界裡,似乎沒有完美這種說法。所以,現在介紹的CSS絕對底部,只是目前個人見過的方案中比較完美的吧。 先說我們為什麼會使用到這個CSS底部布局解決方案: 當做一個頁面時,如果頁面內容很少,不足於填充一屏的視窗地區,按普通的布局,就會出現下面圖片中的樣子(也就是底部內容並沒有位於視窗的底部,而留下了大量空白。 對於追未完美的設計師來說,這是不美觀的。網上有一些解決方案,但會出現當改變視窗高度時,底部和本文重疊的BUG。儘管沒有多少人會有事沒事兒的去改變視窗高度,但設計嘛,追求的就是盡善盡美。 下面是我找到的一個比較完美的方法,來自國外的設計達人,純CSS,可以實現: 當本文內容很少時,底部位於視窗最下面。當改變視窗高度時,不會出現重疊問題。 甚至,創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案。不知道他有沒有去申請專利:) HTML代碼: <div id="wrap"> <div id="main" class="clearfix"> <div id="content"> </div> <div id="side"> </div> </div> </div> <div id="footer"> </div> 說明: 使用這個布局的前提,就是footer要在總的div容器之外,footer使用一個層,其它所有內容使用一個總的層。如果確實需要到添加其它同級層,那這個同級層就必須使用position:absolute進行絕對位置。 網頁製作Webjx文章簡介:CSS的簡單在於它易學,CSS的困難在於尋找更好的解決方案。在CSS的世界裡,似乎沒有完美這種說法。所以,現在介紹的CSS絕對底部,只是目前個人見過的方案中比較完美的吧。 CSS代碼: 下面是主要的CSS代碼,讓你的底部可以位於視窗的最下面: html, body, #wrap {height: 100%;} body > #wrap {height: auto; min-height: 100%;} #main {padding-bottom: 150px;} /* 必須使用和footer相同的高度 */ #footer {position: relative; margin-top: -150px; /* footer高度的負值 */ height: 150px; clear:both;} 說明: 需要注意的就是#main的padding值、footer的高度和負margin值,需要保持一致。 就是這麼簡單,不過還沒完。如果你的主體是使用懸浮布局,還得解決一些瀏覽器的相容問題,這裡使用的重點是為了Goolge Chrome。 對#main部份進行著名的Clearfix Hack: .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */注: 該方案測試於兩欄懸浮布局,相容各大主流瀏覽器,包括Google Chrome。 P.S:網路上之前比較知名的footer布局有 Ryan Faits 創造的,不過它的方法在HTML代碼中會有一個空的div層。嚴格來說,是不符合語義網代碼標準的。 另外,還有一篇 Exploring Footers article from A List Apart ,但使用了一些JavaScript代碼。 這樣一比較,上面看似簡單的純CSS,就顯得偉大許多了。 |