如何有2周浮動的div具有相同的高度

我具有含內包裹的包裝，而內包裝材料包含2周浮動的div。左邊的內容比右邊的內容多，所以它的高度比右邊的高。我在尋找的是兩個容器都有相同的高度。如何有2周浮動的div具有相同的高度

我的HTML：

<div id="wrapper"> 
    <div id="sub-menu"> 
     <div id="left-column" class="column"> 
      Agenda</br> 
      Here I put some texte          
     </div> 
     <div id="right-column" class="column"> 
      sdfdsf       
     </div> 
    </div> 
</div>

我的CSS：

body{ 
    background-color:#E5E5E5;} 

#wrapper{ 
    background-color:#FFFFFF; 
    width:800px; 
    margin-left:auto; 
    margin-right:auto; 
    overflow:auto;} 

#sub-menu{ 
    margin:10px; 
    width:780px; 
    position:relative; 
    float:left;} 

.column{  
    float:left; 
height:100%;} 

#left-column{ 
    width:500px; 
    background-color:yellow;} 

#right-column{ 
    width:280px; 
    background-color:magenta;}

來源

2012-03-10 Marc

將代碼中的問題，太。這不是一個論壇，爲了個人的幫助。 SO問題總有一天會讓別人受益，而當這個環節消亡時，這個問題將毫無意義。 – 2012-03-10 16:25:05

你會發現周圍的淨一些很好的答案，如果你通過[這個問題的通用名稱]搜索（http://www.google.co.uk/search?client=safari&rls=en&q=css%20equal%20height%20columns&ie=UTF -8＆OE = UTF-8）。 – 2012-03-10 16:26:09

不能單獨使用浮動元素，除非你能保證每列的高度（你一般不能與作爲Web這樣的流體介質）通過CSS做到這一點。但是，你有選擇：

使用display: table-cell：http://jsfiddle.net/8LdQk/3/。不幸的是，這在IE6或7中不起作用。詳細描述其使用可能會有所幫助。
使用JavaScript：http://jsfiddle.net/8LdQk/5/。
使用達恩·塞德霍姆的經典faux-columns伎倆。

來源

2012-03-10 16:33:55

你好查克。正如我想要做的似乎相當困難，我會走向你的方向，但爲了使它適用於所有瀏覽器，我只會做一個簡單而普通的表格而不是兩個浮動div ... – Marc 2012-03-10 16:42:56

-1

這似乎這樣的伎倆我。它可以這麼簡單嗎？ :)

.column{float:left;height:100px;}

來源

2012-03-10 16:24:34

你好伊恩。感謝您的幫助。我正在尋找靈活的東西。高度應該自動調整。當把高度自動放在.column上時，它不起作用... – Marc 2012-03-10 16:27:35

這不是一個靈活的解決方案。 – Mindbreaker 2013-06-29 21:25:43

使用500像素寬黃色和280像素寬洋紅色的1像素高重複背景圖像。當一列的大小增加時 - 你會看到兩列的高度相同。

<div class="backgroundColumn"> 
<div> 
Left column 
</div> 
<div> 
right column 
</div> 
<div class="clear"> 
</div> 
</div>

來源

2012-03-10 16:33:14 FiveTools

這是達恩·塞德霍姆的經典仿列招http://www.alistapart.com/articles/fauxcolumns/。作爲其他用戶發佈在這裏。 – FiveTools 2012-03-10 16:40:23

如何有2周浮動的div具有相同的高度

回答

相關問題