Question

假设我在一个包装器中并排有两个div。

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

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

如何确保div secondary始终与div primary

具有相同的高度

Answer 1

尝试使用javascript将主div的值作为第二个div的赋值。

另一种方法是尝试使用像素px或em，这样你就可以确保始终具有相同的高度

Answer 2

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

jsFiddle Demo

首先，您将padding-bottom: 100%;应用于每个并排的div。

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

最后，您将overflow:hidden;添加到他们所在的div中。

的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

Answer 3

如果您为其容器指定高度值，请说#wrapper {height:300px;}，您只需将#primary和#secondary高度值设置为100%即可。但是，如果您不想指定任何高度值，那么您可以使用display:table选项，例如http://jsfiddle.net/qiqiabaziz/LFEF5/

中的示例

Answer 4

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>

Answer 5

不幸的是，没有完美的方法可以在不使用Javascript的情况下实现这一点，因为两个div对彼此一无所知。

您的选择取决于您希望从视觉上获得什么。

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

如果你可以专注于更现代的浏览器，你可以使用flexbox。有关示例，请参阅此帖子等：http://css-tricks.com/fluid-width-equal-height-columns/

Answer 6

使两个高度相等的div（通过在px，em或％中声明它们的高度）并声明它们的overflow : auto，因此如果任何或两个div中的内容增加，则自动提供滚动并且它们的高度是不要被打扰。

Answer 7

确保父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 primary具有margin和/或padding

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

7 个答案: