如何在容器div中有一个带有固定页眉和页脚的可滚动主体？

Question

我有一个容器<div>，里面有两个子<div>个元素。我想在容器<div>的底部放置一个小孩<div>和其他小孩<div>。中间部分（内容）应在顶部和底部子<div>元素之间滚动。

我希望容器<div>中的两个子<div>元素都有一个固定的位置，内容应滚动而不滚动顶部和底部div。

我想要一个使用CSS或jQuery的解决方案。有关JSFiddle示例，请参阅下面的评论。

Answer 1

这应该是相当简单的。的 JSFiddle Example

首先，我将松散的div文本放在<p>元素中，并删除了<p>元素的默认边距。然后，我将overflow: scroll;更改为overflow-y: scroll;并将其移至新的<p>元素。最后，我给<p>元素一个显式的height: 300px;，它是父元素的高度，减去页眉和页脚的高度。

HTML：

<div class="outside">
    <div class="inside">inside1 Top should not scroll</div>
    <p>Your Text Here</p>
    <div class="inside2">inside 2 Bottom should not scroll</div>
</div>

<强> CSS：

.outside {
    width: 400px;
    height: 400px;
    background-color: #EEE;
    border: 1px solid black;
}
.outside p {
    overflow-y: scroll;
    margin: 0;
    height: 300px;
}
.inside {
    border: 1px solid #000;
    background-color: #000;
    color: #FFF;
    height: 50px;
}
.inside2 {
    bottom: 2px;
    border: 1px solid #000;
    background-color: #000;
    color: #FFF;
    height: 50px;
}