子 div 扩展到父级的其余部分

Question

我有一个 div，其中包含堆叠的两个 div。

.container {
    position: fixed;
    padding:4px;
    top: 1px;
    left: 1px;
    width:200px;
    height: 200px;
    border: 4px solid #999;
}
.box1 {
    position: relative;
    height: 50px;
    border: 4px solid #f00;
}
.box2 {
    border: 4px solid #00f;
    height: 100%;
    position: relative;
    overflow: auto;
}

<div class='container'>
    <div class='box1'></div>
    <div class='box2'>
        <div style='height:400px;width:10px;background-color:#000;'></div>
    </div>
</div>

我不希望 DIV2 扩展超过父 div，无论 DIV1 占用多少空间（因为它会随着某些选择而扩展），并且我希望 DIV2 滚动。我认为 100% 的高度会做到这一点，但它会将其扩展为与父 div 相同的 VALUE，这是预期的行为。表格似乎可以做到这一点，但我不想使用表格。

这是一个示例（在示例中，蓝色 div 应该停在灰色 div 的底部）：

http://jsfiddle.net/gateshosting/uJ7Ns/

Answer 1

工作jsfiddle

设置框的高度等于可用高度减去边框高度减去边距高度

 box2 {
    border: 4px solid #00f;
    height: 134px;
    position: relative;
    top: 0;
    left: 0;
    overflow: auto;
}

Answer 2

很遗憾，纯 CSS 无法做到这一点。

你可以使用 Javascript/jQuery：

$(function(){
    //this is triggered by resizing the window
    $(window).on("resize", function(){
        $(".box2").height($(".container").height() - $(".box1").height());
    }).trigger("resize"); //this initializes the height
});

你必须修改你的 CSS：

body, html{
    padding:0;
    margin:0;
    height:100%
}

.container{
    height:100%;
    width:200px;
    background: silver;
}

.box1{
    background: pink;
    height:100px;
    position:relative;
}

.box2{
    background: lightBlue;
    overflow:auto;
}

您不希望在容器元素（.container、.box1、.box2）上进行填充，因为这会使高度偏离您填充的量。如果你想在容器元素中有填充，你应该在你的内容中添加一个带有填充的 div，这样你的高度和宽度就不会被丢弃：

CSS：

.pad {
    padding: 5px;
}

HTML

<div class='box2'>
    <div class="pad">
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
    </div>
</div>    

尝试在此处调整窗口大小：http://jsfiddle.net/THWMp/3/