如何确保两个div具有相同的高度？

假设我在一个包装中并排放置2个div。如何确保两个div具有相同的高度？

<div id="wrapper"> 
    <div id="primary"></div> 
    <div id="secondary"></div> 
</div> 

#primary { 
width:50%; 
float: left; 
} 
#secondary { 
width: 50%; 
}

我怎样才能确保DIV二次始终具有相同的高度DIV主要

来源

2013-04-29 Jack Pilowsky

我假定你的意思是没有指定的高度？除非您可以使用[flex-box]（https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes），否则您将需要JavaScript。 – 2013-04-29 03:02:57

*请参阅我的回答下面的简单，但很酷的CSS技巧* – gibberish 2015-03-17 02:52:05

不幸的是，这样做没有使用Javascript没有完美的方法，抓实两个div一无所知彼此。

你的选择取决于你想要达到的目标。

一个快速谷歌搜索提出这看起来很有希望：http://www.vanseodesign.com/css/equal-height-columns/

如果你能专注于更现代的浏览器您可以使用Flexbox的脱身。看到这个帖子的例子等：http://css-tricks.com/fluid-width-equal-height-columns/

来源

2013-04-29 03:03:01 BePatient

好的答案应该实际上包含答案，而不是答案的链接。链接可能会在某一时刻死亡，并为读者提供额外的负担。 – RushPL 2014-06-25 16:37:11

尝试使用JavaScript获取主div的值在第二个div的任务。

的另一种方法是试图使用像素PX或EM，这样可以确保始终具有相同的高度都

来源

2013-04-29 03:10:12

使高度相等的两个div（无论是在PX宣布他们的高度，EM或％）并声明他们的overflow : auto，所以如果任何或两个div中的内容增加，滚动会自动提供，并且它们的高度不会受到干扰。

来源

2013-04-29 03:59:04 qwerty

只是确保父DIV（DIV包装）在像素宽度

<div id="wrapper"> 
    <div id="primary"></div> 
    <div id="secondary"></div> 
</div> 

#wrapper { 
    width:300px; 
} 
#primary { 
    width:50%; 
    float: left; 
} 
#secondary { 
    width: 50%; 
}

这会工作，除非DIV主要有边距和/或填充

来源

2013-04-29 04:08:37 arnaldododo

如果指定的高度值他们的容器可以说是#wrapper {height:300px;}，您可以将#primary和#secondary高度值设置为100%。但是，如果你不想指定任何高度值，那么你可以在例子中使用display:table选项喜欢这里http://jsfiddle.net/qiqiabaziz/LFEF5/

来源

2013-04-29 04:21:01

Your CSS 

.table{display:table;width:99.98%;margin:0 auto;padding:0 0.01% 0 0.01%;border-collapse:separate;border-spacing:5px;} 
.row{display:table-row;} 
.cell{display:table-cell;text-align:center;width:50%;} 

Your HTML 

<body> 
    <div class="table"> 
     <div class="row"> 
      <div class="cell">content for this div 
      </div> 
      <div class="cell">content for this div 
      </div> 
     </div> 
    </div> 
</body>

来源

2014-02-13 04:19:35 user3302090

有一个关于如何做到这一点一个很酷的技巧。

jsFiddle Demo

首先，你申请padding-bottom: 100%;每个并排侧股利。

接下来，您将margin-bottom: -100%;应用于每个并排div。 注-

最后，添加overflow:hidden;到他们里面的股利。

Presto！真正的幸福是你的。

HTML：

<div id="wrapper"> 
    <div id="primary">Lorem ipsum dolor set amet. </div> 
    <div id="secondary">En arche yn ho logos. Kai ho logos yn pros ton theon. Kai theon yn ho logos. En arche yn ho logos. Kai ho logos yn pros ton theon. Kai theon yn ho logos. </div> 
</div>

CSS：

#wrapper {overflow:hidden;} 
#primary {width:50%; float:left; padding-bottom:100%; margin-bottom:-100%;} 
#secondary{width:50%; float:left; padding-bottom:100%; margin-bottom:-100%;}

参考文献：

http://www.ejeliot.com/blog/61

来源

2015-03-17 02:50:00 gibberish

如何确保两个div具有相同的高度？

回答

相关问题