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

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/