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：我想看到绿色框上方和下方的红色方块。
UPD2：绿色框的高度应为 red.height - 32px*2

Answer 1

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

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

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

Answer 2

第二个 div 没有分配高度，所以最里面的 div 不能分配相对高度。尝试添加以下 CSS 规则：

.left div {
    height: 100%;
}

或者，为内部 div 分配明确的高度。

http://jsfiddle.net/B9z92/1/

Answer 3

min-height: 100%;中使用.border{...}。并添加一个类 .middle { height: 100%; }并将其分配给div的父div级。.border{...}