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/

子div扩展到父母的剩余部分

2 个答案: