Question

有没有办法让DIV展开以填充其父容器中剩余的空间，而无需使用Javascript来计算必要的高度？

<div class="parent" style="height: 100%">
    <div class="child-top">
    </div>

    <div class="child-bottom" style="position: relative;">
    </div>
</div>

.parent是一个占据整个屏幕的侧边栏，.child-top高度可能会因内容而异，我希望.child-bottom能够占用余下的空间位置相对，以便我可以正确定位其他元素。

更新：我无法在任何元素中使用固定高度。 .child-top出于显而易见的原因.child-bottom，当其高度超过父级时，{{1}}会有一个带滚动条的元素。

Answer 1

如果您只是想填写它，可以使用overflow：隐藏在父级上来伪造它。这有一些警告。儿童身体内部高度大于儿童的任何东西都将被隐藏，因此请按照您的意愿进行操作。

http://jsfiddle.net/hBLQR/

您的HTML：

<div class="parent">
    <div class="child-top">
        Hi there
    </div>

    <div class="child-bottom">
        Hi back
    </div>
</div>

CSS：

.parent {
    position: absolute; 
    left: 0; 
    right: 200px; 
    top: 0; 
    bottom: 0; 
    overflow: hidden;

}

.child-top { 
    background: green; 
    height: 100px;
    width: 200px;
}

.child-bottom { 
    background: red; 
    height: 100%;    
    width: 200px;
}

使用CSS扩展div并且没有Javascript

1 个答案: