在div中创建一个可填充父容器的可滚动区域？

Question

我试图创建如下内容：

在容器内部，我想要一个固定大小的标题，然后在它下面的一个可滚动的div填充所有剩余的空间。我似乎正在解决这个问题，因为当我尝试将可滚动div的高度设置为100%时，它会从容器体中弹出。

这是我到目前为止所提出的：

HTML

<div class="container">
    <div class="top-part">
        Hello!
    </div>

    <div class="scrollable-bottom">
        <h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1
    </div>
</div>

CSS

.container {
    width: 400px;
    height: 400px;
    border: 1px solid #cacaca;
}

.top-part {
    width: 100%; 
    height: 70px;
    border: 1px solid #cacaca;
}

.scrollable-bottom {
    height: 100%; 
    overflow-y: scroll;
    background-color: rgba(255, 255, 247, 0.4);

}

如果你结帐小提琴here，你会发现scrollable-bottom在container之外拍摄。我无法弄清楚这是为什么......

height属性是否指向父元素高度？如果是这样，那为什么它不受约束？

Answer 1

你是完全正确的。 100％高度是指容器的整个高度。但另请注意，此处应计算顶部条形高度。

给它一个负的上边距相同数量的顶部条应该修复它，但它会隐藏底部内容本身的部分数量，这就是为什么我们添加一个具有相同高度的顶部填充。

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.container {
    width: 400px;
    height: 400px;
    border: 1px solid #cacaca;
}

.top-part {
    width: 100%; 
    height: 70px;
    border: 1px solid #cacaca;
    position: relative;
    z-index: 2;
    background: white;
}

.scrollable-bottom {
    height: 100%; 
    overflow-y: scroll;
    padding-top: 70px;
    margin-top: -70px;
    background-color: rgba(255, 255, 247, 0.4);
        
}

<div class="container">
    <div class="top-part">
        Hello!
    </div>
    
    <div class="scrollable-bottom">
        <h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1>
    </div>
</div>

Answer 2

由于您的容器高度为400px，标题覆盖了70px的高度。 只需将max-height:330px提供给可滚动的div。它会解决你的问题。结果为http://jsfiddle.net/o2307qup/2/

您可能正在玩一些填充，边距和边框。因此，如果您没有看到完美的结果，请根据它们更改最大高度。另请阅读以下@Marc

的评论

Answer 3

height: 100%;表示100％的父元素高度，因此如果父高度为400px，则子高度也将为400px。

您可以使用.scrollable-bottom功能自行计算calc()的尺寸。 It's supported in modern browsers

您还可以通过更改.top-part和.scrollable-bottom的框模型行为，为box-sizing: border-box;和.top-part设置.scrollable-bottom来消除幻数 它将改变其行为以在框区域的已定义宽度/高度内包含填充和边框，而不是通过填充和边框宽度/高度来扩大它

这样，您无需再担心在添加或删除填充或边框或.scrollable-bottom

时更改.top-part高度/宽度

.container {
  width: 400px;
  height: 400px;
  border: 1px solid #cacaca;
}
.top-part, 
.scrollable-bottom {
  box-sizing: border-box;
}

.top-part {
  width: 100%; 
  height: 70px;
  border: 1px solid #cacaca;
}

.scrollable-bottom {
  height: calc(100% - 70px); /* parent height - .top-part height */
  overflow-y: scroll;
  background-color: rgba(255, 255, 247, 0.4);
}

<div class="container">
    <div class="top-part">
        Hello!
    </div>

    <div class="scrollable-bottom">
        <h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1
    </div>
</div>