HTML Div高度问题

Question

我的页面中有两个div元素垂直对齐。一个div的内容是固定的，但是其他div的内容因其高度而异。我想让两个高度相同的div。我怎么能这样做？

Answer 1

诀窍是使用CSS属性display：table，display：table-row和display：table-cell来使容器（在本例中为div元素）表现得像表格单元格。

Full explanation and demo

还：Equal Height Columns using CSS

Answer 2

有两种方法：

使用带有假背景的CSS

为此，您需要制作包含两列的背景图像，因为您希望看到它们。在任何保留列的情况下显示此内容，现在列将看起来相同的高度，即使它们不是。

您可能需要添加新的包装div以应用背景：

<div class="colwrap">
    <div class="col">...</div>
    <div class="col">...</div>
</div>

<div class="colwrap">
    <div class="col">...</div>
    <div class="col">...</div>
</div>

或者，使用jQuery（或其他）来修复高度

这稍微有些手动，但是如果你有其他JS脚本启动，这应该不会太难。

if ($('col:1').height() > $('col:2').height())
    $('col:2').height($('col:1').height());
else
    $('col:1').height($('col:2').height());

或之类的会做到这一点。