Question

我有两个div在一起。我想两个div都有相同的高度。可能的？

这是一个JsBin作为起点：http://jsbin.com/uhoqeb/edit#html,live

感谢。

Answer 1

为此，您可以使用display:table-cell属性。

#leftSection, main-content{
display:table-cell;
}

选中此http://jsbin.com/uhoqeb/2/edit#html,live

但它不起作用IE7＆amp;下方。

Answer 2

http://jsfiddle.net/spacebeers/s8uLG/3/

你设置你的容器，溢出设置为隐藏，然后在每个div添加负边距底部和相等的正填充底部。

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
</div>

如果你想要一个边框，那么请看一下这个例子 - http://www.ejeliot.com/samples/equal-height-columns/example-6.html

Answer 3

添加容器div

#macroSection {
    height: 250px;
    border: 1px solid #AAA;
}

然后将属性“height”添加到其他2个div：

#leftSection 
{
    background-color: #fff;
    width:170px;
    float:left;
    height: 100%;
    border: 1px solid #c7c7c7;
    display:block;

}

#main-content
{        
    width:250px;
    overflow:auto;
    height: 100%;
    border: 1px solid #c7c7c7;
    display: block;
    overflow: hidden;    
}

然后将它们包装在你的html中：

  <div id="macroSection">
  <div id="leftSection">
    This is my left section
  </div>
  <div id="main-content">
    This is my main content <br/>
    This is my main content <br/>
    This is my main content <br/>
    This is my main content <br/>
    This is my main content <br/>
    This is my main content <br/>
    This is my main content <br/>
  </div> 
  </div>

Answer 4

您也可以使用javascript实现此目的：

<script type="text/javascript">
  document.getElementById('leftSection').style.height = document.getElementById('main-content').clientHeight;
</script>

有2个div相同的高度

4 个答案: