如何在容器 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;
}