DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS技巧:3種常用方法解決div列高度自適應(2)
CSS技巧:3種常用方法解決div列高度自適應(2)
編輯:CSS詳解     

2、腳本控制高度 ..

在中加入如下代碼(假設divright的高度相對最高):

  1. <script language="Javascript">
  2. document.getElementById"divleft").style.height
  3. =document.getElementById"divright").scrollHeight "px"
  4. script>

優點:代碼超級簡單

缺點:要確定有某一列的高度始終是相對最高的,此方法比較被動。

3、margin負值父子容器高度繼承

這個方法能較好地解決列高度相同的問題。三行二列布局,主要內容在左邊,網頁寬度780px,左列540px,右列240px。

CSS代碼:

  1. #main{
  2. width: 540px;
  3. float:left;
  4. background:#FFFFFF;
  5. text-align:left;
  6. }
  7. #divleft{
  8. width: 540px;
  9. float: left;
  10. position:relative;
  11. margin-left:-540px;
  12. }
  13. #divright{
  14. width: 240px;
  15. float: right;
  16. position:relative;
  17. margin: 0 -240px 0 0;
  18. background: #F0F0F0;
  19. }

Html代碼:

  1. <div id="main">
  2. <div id="divleft">
  3. <div id="divright">div>
  4. div> !
  5. div>

或許剛接觸的Web Standards的朋友對這種方法不怎麼理解,現Blank分析一下:

[A]
[B][C]

上結構中a包含c,c包含b。當b的高度為最高時,那麼a和c將繼承b的高度,如果a和b位置重合,將顯示b的背景;而當c的高度最高時,那麼a繼承將繼承c的高度,如果a和b位置重合,將顯示a的背景。這樣無論b最高或者c最高都將顯示div列高度相同。

優點:兼有第一種方法的優點,並且比第一種方法的代碼稍微簡潔。

缺點:整體結構只能左對齊。

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved