Html 在填充父容器的div内创建可滚动区域？

我正在尝试创建如下内容：

在容器内部，我希望有一个固定大小的标题，然后在它下面有一个可滚动的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>

如果您签出小提琴，您将看到

可滚动底部

射出

容器

。我不明白为什么这是

---

height

属性不是指父元素的高度吗？如果是这样的话，为什么不加以限制

你完全正确。100%高度是指容器的全高。但也要注意，这里应该计算顶杆的高度

给它一个负的顶部边距，同样大小的顶部栏应该可以修复它，但它会隐藏部分底部内容本身，这就是为什么我们添加一个高度相同的顶部填充

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.集装箱{
宽度：400px；
高度：400px；
边框：1px实心#cacaca；
}
.顶部{
宽度：100%；
高度：70像素；
边框：1px实心#cacaca；
位置：相对位置；
z指数：2；
背景：白色；
}
.可滚动底部{
身高：100%；
溢出y：滚动；
填充顶部：70px；
利润上限：-70px；
背景色：rgba（255、255、247、0.4）；
}

你好
内容内容内容内容内容

因为您的容器高度为400px，70px高度由标题覆盖。 只需将

最大高度：330px

指定给可滚动div即可。这将解决您的问题。结果如下

---

你可能在玩一些填充物、边距和边框。因此，如果您没有看到完美的结果，请根据它们更改最大高度。也请阅读下面@Marc的评论，高度：100%表示100%的元素父级高度，所以如果父级高度为400px，子级高度也将为400px

使用

calc（）

函数，您可以不用自己计算

可滚动底部的大小

您还可以通过更改
.top-part
和
.scrollable-bottom
的框模型行为，设置
框大小：边框框，来摆脱幻数用于
。顶部
和
。可滚动底部
它将改变其行为，将填充和边框包含在框区域的定义宽度/高度内，而不是按填充和边框宽度/高度进行放大

这样，无论何时添加或删除填充物或边框，或添加或删除
顶部，您都不必再担心更改
.scrollable bottom
高度/宽度


.container{
宽度：400px；
高度：400px；
边框：1px实心#cacaca；
}
.顶部，
.可滚动底部{
框大小：边框框；
}
.顶部{
宽度：100%；
高度：70像素；
边框：1px实心#cacaca；
}
.可滚动底部{
高度：计算（100%-70px）；/*母体高度-.顶部零件高度*/
溢出y：滚动；
背景色：rgba（255、255、247、0.4）；
}

你好
content您应将最大高度设置为328px，以考虑顶部零件的高度，即72px，70px高度+2px（顶部/底部边框）。您还可以使用328px的高度，得到几乎相同的结果。如果可滚动区域有背景图像或颜色，则差异将至关重要。这种方法的问题是滚动条指示器/滑块部分隐藏，如果内容足够长，导致指示器图标变短，完全隐藏，则可能会导致可访问性问题。
.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);

}