html - Expanding divs with CSS and no Javascript

Question

Is there a way of making a DIV expand to fill the space left in it's parent container without having to use Javascript to calculate the necessary heights?

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

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

.parent is a sidebar that takes up the whole screen, .child-top height may vary depending on the content, and I would like .child-bottom to just take up the rest of the space with position relative so that I can correctly position other elements inside.

UPDATE: I can't use fixed heights in any of the elements. .child-top for obvious reasons, and .child-bottom will have an element with a scrollbar when its height outgrows the parent.

Answer 1

如果你只是想把它填满，你可以在父级上使用溢出：隐藏来伪造它。这有一些警告。任何高度大于孩子的孩子底部的东西都将被隐藏，所以你可以随意使用。

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;
}