Question

我有一个div是容器。这个div包含2个div标签，如下所示：

<style type="text/css">
#container{
    height:100%
}

#child1{
    height:35px;
}

#child2{
    overlow-y:auto;
    height: ??? /**to match remain space of container**/
}
</style>


<div id="container">
    <div id="child1">this is a child1</div>
    <div id="child2">this is a child2</div>
</div>

如果child2的内容太多，如何设置child2的高度以匹配容器的剩余空间，即垂直滚动条？

Answer 1

一种选择是使用相对和绝对定位的混合：

#container{
    height:100%;
    position: relative;
}

#child1{
    height:35px;
}

#child2{
    overflow-y:auto;
    position: absolute;
    width: 100%;
    top: 35px;
    bottom: 0;
}

您实际上根本没有设置高度，您从顶部创建元素35px，从底部创建0px。

http://jsfiddle.net/AMQ8f/4/

Answer 2

另一种解决方案是使用calc：

#child2{
    overlow-y:auto;
    height: calc(100% - 35px);
}

http://jsfiddle.net/AMQ8f/1/

IE9 + http://caniuse.com/calc

Answer 3

您可以尝试使用计算功能

      height: calc(100%-35px)
      height: -webkit-calc(100%-35px)
      height: -moz-calc(100%-35px)

我从来没有真正使用过这个，可能不是所有的浏览器都会支持这个，但我认为它可以工作。

Answer 4

有错误，或者我认为你的css overlow-y

中有拼写错误

创建一个函数来调整页面加载时将调用的child2的高度以及更改container的高度的事件

DEMO & CODE

注意： - 滚动小提琴输出容器下面有一个按钮来改变容器的高度

$(document).ready(function(){
    setHeight();

     $('#change').click(function () {
        $('#container').css('height', '300px');
        setHeight();
     });

});

function setHeight (){
    $('#child2').css('height', $('#container').height() - 35 + 'px');
    $('#child2').css('max-height', $(this).height())
}

Answer 5

我不明白你的问题，我想你想要它滚动？如果是的话

child2{
overlow-y:scroll;
height: 100%;
}

我希望这会有所帮助

如何设置div的高度与其容器匹配

5 个答案: