經常我們會用Div+CSS去佈局,要用到自適應高度,就比如說要將網頁分成左右結構,當左右的內容高度不一樣時,那二個Div就高度不一樣(我想用傳統的表格佈局這一點做得比較好吧
),非常難看,在網上找了一些資料,基本上都是用"內正外負"的方法來實現,在此記錄,先看代碼吧
CSSCode
.wrap
{
overflow:hidden;
}
.sideLeft
{
float:left;
width:10%;
background-color:#CCCCCC;
border:1px solid #006666;
padding-bottom:10000px;
margin-bottom:-10000px;
}
.sideright
{
float:right;
width:88%;
background-color:#666666;
border:1px solid #006666;
padding-bottom:10000px;
margin-bottom:-10000px;
}
HTML代碼如下:(首選建立一個包含的Div,然后將參與的Div包含進去)
HTML Code
<div class="wrap">
<div class="sideLeft">左邊<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div class="sideright">右邊</div>
</div>
解決的關鍵就是在wrap這個包含Div里面,將overFlow=hidden
然后利用
padding-bottom:10000px;
margin-bottom:-10000px;
內(padding-bottom)正外負(margin-bottom)使它們相互消減,而在外層的wrap會將它們多餘的部分hidden從而實現
但還有一個問題不明白:當一個瀏覽器最大化,網頁里面有一個Div就適應瀏覽器的高度該怎麼做?
請博客園里的大牛解答我心里的疑惑,謝謝
