如何在容器div中有一个带有固定页眉和页脚的可滚动主体？ [英] How can I have a scrollable body with fixed header and footer inside a container div?

问题描述

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

I have one container <div> with two children <div> elements inside of it. I want to place one child <div> at the top and other child <div> at the bottom of the container <div>. The middle part (the content) should scroll between the top and bottom child <div> elements.

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

I want both children <div> elements inside the container <div> to have a fixed position and the content should scroll without scrolling both top and bottom div.

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

I'd like a solution using CSS or jQuery, please. For a JSFiddle example, see my comment below.

推荐答案

这应该相当简单。 JSFiddle示例 。

This should be fairly straightforward. JSFiddle Example.

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

First, I put your loose div text inside a <p> element, and removed the default margin of that <p> element. Then, I changed the overflow: scroll; to overflow-y: scroll; and moved it to that new <p> element. Finally, I gave the <p> element an explicit height: 300px;, which is the height of the parent element, minus the height of the header and footer.

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;
}

这篇关于如何在容器div中有一个带有固定页眉和页脚的可滚动主体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！