Question

我需要创建两个高度相同的div。每个div的高度在每个页面上都不同（高度取决于内容）。有没有办法如何将两个div的高度锁定在一起？这是jsfiddle（我需要根据div A增加div C的高度，反之亦然）。

注意：我无法使用表格或父div。我是JavaScript的新手，所以我希望没有它就可以完成。

<div class="a">
    <brdsds><br><br><br><bdsdsr><br><br><br>ds<br>dsds<br>dsd
</div>
<div class="b">
    dsdds
</div>
<div class="c">
    dsdds
</div>

Answer 1

您可以使用display:table-cell，先删除float并添加：

div {
 width 30px;
 display:table-cell;/*Add this*/
 /*float:left; Remove this*/
}

检查此演示http://jsfiddle.net/8zPD2/1/

使用前请检查 Compatibility

Answer 2

只需要使用这个CSS：

.a,
.c {
  max-height: 200px;
}

Answer 3

试试这个：

<div class="divmaster">
  <div class="divchild">
    <brdsds><br><br><br><bdsdsr><br><br><br>ds<br>dsds<br>dsd
 </div>
 <div class="divchild">
    dsdds
 </div>
 <div class="divchild">
    dsdds
 </div>

和css：

.divmaster{
    display:table;
 }

.divChild{
   height: 100%;
}

Answer 4

如果您想在JavaScript中尝试此操作，请使用以下代码：

<强> DEMO

$(function(){ 
setHeight = function (src, target) { 
h = src.height(); 
target.css('height', h + 'px'); 
} 
content = $('.a'); 
imagediv = $('.b'); 
setHeight(content, imagediv); 
});

Answer 5

只需将div设置为display: table-cell，然后移除float: left。

<强> CSS

div {
    display: table-cell;
    width 30px;
}

.a {
    background-color: #e9d8b7;
}

.b {
    background-color:blue;
}

请检查：http://jsfiddle.net/8zPD2/6/

Answer 6

将最小高度设置为高度较高的div的高度。假设您的div A具有最高高度，则使用该高度对所有div。如果你不知道哪个div可能有heigest div，那就不可能用css了。正如你在这里询问如何用css这样做它是

.a,.b,.c{ min-height:200px; max-height:400px; }

如何锁定两个div的高度？

6 个答案: