製作兩個並排div高度等於

所以我來自桌面設計網頁，並認爲我會給div和CSS一個嘗試，所以我希望你能幫助我。製作兩個並排div高度等於

現狀：

目前，我有以下的div結構：

<div id="header"> 
    <div id="headline"> 

    </div> 
    <div id="login"> 

    </div> 
</div> 
<div style="clear: both;" /> 
<div id="mainbody" style="border-top: black solid 2px;"> 
    <div id="menu"> 

    </div> 
    <div id="bodyContent"> 

    </div> 
</div> 
<div style="clear: both;"></div> 
<div id="footer"></div>

和我有下面的CSS代碼：

#mainbody 
{ 
    background-color: white; 
    width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#menu 
{ 
    width: 137px; 
    float: left; 
    background-color: #EEEEEE; 
    padding-left: 3px; 
} 

#bodyContent 
{ 
    float: right; 
    width: 850px; 
    background-color: white; 
    padding: 5px; 
} 

#headline 
{ 
    width: 693px; 
    height: 75px; 
    float: left; 
    background-color: white; 
    font-family: monospace; 
    font-size: 48pt; 
    font-weight: bold; 
    padding-left: 7px; 
} 

#login 
{ 
    height: 75px; 
    width: 300px; 
    float: right; 
    background-color: white; 
} 

#header 
{ 
    background-color: white; 
    width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#footer 
{ 
    border-top: black solid medium; 
    width: 1000px; 
    background-color: white; 
    margin-left: auto; 
    margin-right: auto; 
    height: 50px; 
}

問題：

「menu」和「bodyContent」divs在我的頁面中有不同的高度。因此，如果我有一個相當大的「bodyContent」頁面，「菜單」div不會一直下到「頁腳」div。如果「menu」div高於「bodyContent」div，則存在相同的問題。

我想要「菜單」和「bodyContent」divs具有相同的高度/走到頁腳div。

我試過尋找解決方案，但到目前爲止還沒有得到我期待的結果。我希望你們能在這方面幫助我。

感謝

來源

2012-03-20 evilfish

試試這個：

HTML

<div id="container3"> 
    <div id="container2"> 
     <div id="container1"> 
      <div id="col1">Column 1</div> 
      <div id="col2">Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2</div> 
      <div id="col3">Column 3</div> 
     </div> 
    </div> 
</div>

CSS

#container3 { 
    float:left; 
    width:100%; 
    background:green; 
    overflow:hidden; 
    position:relative; 
} 
#container2 { 
    float:left; 
    width:100%; 
    background:yellow; 
    position:relative; 
    right:30%; 
} 
#container1 { 
    float:left; 
    width:100%; 
    background:red; 
    position:relative; 
    right:40%; 
} 
#col1 { 
    float:left; 
    width:26%; 
    position:relative; 
    left:72%; 
    overflow:hidden; 
} 
#col2 { 
    float:left; 
    width:36%; 
    position:relative; 
    left:76%; 
    overflow:hidden; 
} 
#col3 { 
    float:left; 
    width:26%; 
    position:relative; 
    left:80%; 
    overflow:hidden; 
}

例子： http://jsfiddle.net/VdfJh/

，並檢查此鏈接：

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

來源

2012-03-20 14:19:32 MCSI

你可以找到這個問題的答案接受的解決方案這一點。

How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

來源

2012-03-20 13:57:00

我想嘗試從菜單和的BodyContent移除浮子，都設置到顯示：內聯塊;並設置菜單＃高度爲100％

沒有測試，可能會失敗

來源

2012-03-20 13:57:48

根據您有支持的瀏覽器，你可以嘗試不同的方法。

一個非常新的，很好的解決方案是新flexbox layout（spec），它具有很好的support nowadays，僅供這種佈局結構：Example。

另一個乾淨的解決方案是 display:table，這迫使你的div表現得像他們所有的優點，比如等於高柱和沒有非語義標籤雜亂和不靈活的結構的缺點表。爲了實現這一點，請嘗試以下操作：

parent{ 
    display:table; 
} 
.children{ 
    display:table-cell; 
}

See the example fiddle

來源

2012-03-20 14:15:07 Christoph

製作兩個並排div高度等於

回答

相關問題