如何在內裝DIV中設置相同的高度？

Question

可能重複：
Maximize a floating div?

我有這樣的HTML代碼：

<div id="container"> 


     <div id="sidebar"> 

      left 
      <br /><br /><br /><br /><br /><br /> 
     </div> 

     <div id="content"> 
      right 
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
      bla bla 
     </div> 

     <div class="clear"></div> 

    </div> 

，這是CSS代碼：

#container { 
    width: 760px; 

    margin-left: auto; 
    margin-right: auto; 
    margin-top: 10px; 

    overflow: hidden; 
    background: #ffffff; 
    border: 1px solid #cdcdcd;  
} 

#sidebar { 
    float:left; 
    width:25%; 
    background:#555; 
} 

#content { 
    float:left; 
    width:75%; 
    background:#eee; 
} 


.clear { 
    clear: both; 
} 

不幸的是，側欄與cointaner沒有相同的高度，我怎樣才能延長它的高度？

感謝

Answer 1

則可以將容器元素的背景顏色設置爲相同的背景色的側欄。這樣，至少看起來像邊欄延伸到底部。

如果你需要側邊欄真的一直延伸下來，我認爲最簡單的方法是使用表格。可能有一種方法可以使用CSS來做到這一點，但我已經搜索了很多並沒有找到方法。

Answer 2

您的#content中有更多<br/>然後在您的邊欄中。因此整個#container的最高div元素的高度是#content，這就是爲什麼＃sidebar看起來更小。要麼將相同數量的<br/>放在＃側欄中，要麼將<br/>從兩個div中取出，並將它們的高度設置爲例如

#sidebar{ 

height:100; 

} 

#content{ 

height:100; 

} 

Answer 3

可能不是你在尋找什麼，但試試這個：

<style> 
#container { 
    width: 760px; 

    margin-left: auto; 
    margin-right: auto; 
    margin-top: 10px; 

    overflow: hidden; 
    background: #ffffff; 
    border: 1px solid #cdcdcd;  
    position: relative; //Makes the children in the container positionable 
} 

#sidebar { 
    bottom: 0px; //position side bar. 
    left: 0px; //position side bar. 
    top: 0px; //position side bar. 
    width:25%; 
    background:#555; 
    position: absolute 
} 

#content { 
    margin-left: 25%; 
    width:75%; 
    background:#eee; 
} 


.clear { 
    clear: both; 
} 
</style> 
    <div id="container"> 


     <div id="sidebar"> 

      left 
      <br /><br /><br /><br /><br /><br /> 
     </div> 

     <div id="content"> 
      right 
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
      bla bla 
     </div> 

     <div class="clear"></div> 

    </div>