1. 程式人生 > >(轉)Div + CSS 高度自適應解決方案

(轉)Div + CSS 高度自適應解決方案

自適應高度的問題,採用 Div + CSS 進行三列或二列布局時,事先不知道具體高度,只能根據內容的增減自適應高度,要使兩列(或三列)的高度相同,用 Table 很容易實現,但採用 Div + CSS 就顯得比較麻煩了。按照一般的做法,大都採用背景圖填充或 JS 指令碼的方法使高度相同,但這些都不是最好的辦法,我認為…

下面介紹採用“隱藏容器溢位”和“正內補丁”和“負外補丁”結合的方法

主要程式碼:

#wrap{overflow:hidden;} /*外容器*/
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;} /*列*/

完整例子程式碼:

css 程式碼
  1. #wrap{overflow:hidden;}    
  2. #sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}   
html程式碼
  1. <divid="wrap"style="width:300px; background:#FFFF00;">
  2. <divid="sidebar_left"style="float:left;width:100px; background:#FF0000;">Left</div>
  3. <divid
    ="sidebar_mid"style="float:left;width:100px; background:#666;">
  4.     Middle<br/>
  5.     Middle<br/>
  6.     Middle<br/>
  7.     Middle<br/>
  8.     Middle<br/>
  9.     Middle<br/>
  10.     Middle<br/>
  11.     Middle<br/>
  12.     Middle<br/>
  13. <br
    /><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  14. </div>
  15. <divid="sidebar_right"style="float:right;width:100px; background:#0000FF;">
  16. Right
  17. </div>
  18. </div>