html - 如何使 div 使用 100% 的可用高度？

Question

我有下一个 html:

<div class="left">
    <div style="margin: 32px 0;">
        <div class="border"></div>
    </div>
</div>

和CSS:

.left {
    position:absolute;
    background: red;
    height: 50%;
    width: 32px;
}
.border {
    background: green;
    height: 100%;
}

但我没有看到绿框 :(

UPD:我想在绿框上方和下方看到红色方 block 。
UPD2: 绿框的高度应该是 red.height - 32px*2

Answer 1

您的问题是这里有 3 个空的 div，但其中没有一个设置了高度。因此，即使您执行 min-height: 100% 它也不会工作，除非某些外部容器具有您未显示的高度。您需要将一些内容放在那里或给 3 个 div 之一(假设它们是页面上唯一的容器)一个实际高度。像 .left{ height: #px; }(# = 你想要的高度)。否则浏览器不知道如何呈现百分比，因为它也没有任何关联。

Div 是 block 级元素，这意味着它们将采用放入其中的内容的大小，但如果其中没有内容，它们将采用 0px x 0px 的高度。

http://jsfiddle.net/X6qkL/5/已更新