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：绿色框的高度应为红色。高度 - 32px * 2

Answer 1

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

Div是块级元素，这意味着它们将假定放入其中的内容的大小，但如果其中没有内容，则它们将假定0px到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{...}。

如何让div使用100％的可用高度？

3 个答案: