2

我有一个包含两个 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/

4

2 回答 2

2

工作jsfiddle

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

 box2 {
    border: 4px solid #00f;
    height: 134px;
    position: relative;
    top: 0;
    left: 0;
    overflow: auto;
}
于 2013-03-22T19:32:17.573 回答
1

不幸的是，你不能用纯 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/

于 2013-03-22T19:29:44.863 回答