如何有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具有相同的高度

回答

相关问题