需要實現這麼一個效果:
主內容比較多,而且內容高度不固定,側欄內容比較少,但是爲了美觀需要高度跟隨主內容高度改變,以達到底部對齊的效果
首先想到的是在右側欄上添加height:100%;的樣式,但是外層上如果不明確寫明高度,這個100%是不會被偵測到的,而在外層上寫一個高度的話,ie6不會出問題,但是ie7和ff會嚴格實現這個高度,所以當設定的高度被超出就會出現問題.
後來發現一種比較簡單的方法可以實現這個效果而且只需幾行css,不需要js,不需要hack,ie6,ie7,ff下測試均未發現問題,代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>兩列自適應佈局</title>
<style type="text/css">
.out{overflow:hidden; width:650px; margin:0 auto;}
.div1{padding-bottom: 5000px; margin-bottom: -5000px; width:490px; background:#ff1; float:left; margin-right:10px;}
.div2{padding-bottom: 5000px; margin-bottom: -5000px; width:150px; background:#ccc; float:left;}
</style>
</head>
<body>
<div class="out">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
</body>
</html>
實現的效果爲:
初始狀態:
在左側欄增加br標籤後的效果:
可以發現右側的div可完全根據左側的高度來改變.
當然這只是一個小trick,真正把它放在大型網站上，還是比較擔心會發生這樣那樣的問題，尤其是向後兼容性，說不定會埋下地雷，後來查找了一下，發現新浪讀書頻道的內頁也使用了這個效果，但是他們的開發人員是用最穩定，最簡單的方法來實現這個效果的，其實就是在最外層div把右側div的背景用1px高的背景圖片縱向平鋪，如果右側div有border,那麼緊接着這個最外層div增加一個高1px的橫向border(縱向border可以被包括在背景圖片裏)。
當然這個做法也是有缺陷的，首先最下方新增加的那個“堵頭”完全沒有語義，只是爲了實現效果而存在，但是在目前各瀏覽器各自爲政，css1本身就存在諸多問題的前提下，也就不能苛求什麼了，所以推薦使用這種解決方法。