当任何DIV高度增加时，如何增加两个DIV之间的边界高度？

Question

我的DIV身高有问题。看到图片，有2个div标签，div-1有黑色边框。和div-1和div-2高度没有设置。我希望任何那些div高度随着内容增加然后两个div标签之间的边界将自动增加并且总是像图片。如果我使用表然后它不是那个问题。但是使用div标签怎么可能呢？

-Thanks。

Answer 1

如果您不关心IE7，可以使用display: table-cell直接进行布局。它会强制两个元素具有相同的高度，因此边框将始终击中你的黑色底部。

div.page {
    display: table;
    width: 500px;
}
div.page > section {
    display: table-cell;
    width: 70%;
    vertical-align: top;
    border-right: 1px solid #ccc;
}
div.page > aside {
    display: table-cell;
    width: 30%;
    vertical-align: top;
}

<强> HTML

<div class="page">
    <section>Left</section>
    <aside>Left</aside>
</div>

<强>演示

http://jsfiddle.net/VEzUG/

您当然可以使用<div>代替<section>和<aside>。