Question

有一个message_container div，它有一个固定的可滚动的message_header div和一个可滚动的message_body div。我遇到的问题是message_body div的内容位于固定div后面。我该如何解决这个问题？

编辑：我做了修改，现在我有一个溢出的message_header div和一个message_body div。 message_header很棒，message_body看起来还不错，但我仍然不想让它在message_header div后面向上滚动。我该如何纠正？为了清楚起见，这段代码位于一个模态窗口中，我没有包括那个因为我没有觉得有必要解决我的问题。

我在jsfiddle处重复了这个问题。我使第一个内容条目更长，出现在标题div后面，并在滚动时看到。我希望内容从固定的标题div下面开始，而不是在它后面。

CSS片段：

.message_container{
    width=600px;
    height=395;
}

.message_header{
    padding-bottom: 5px;
    font-size: 14px;
    position: fixed;
    width:500px;
    height:50px;
    background-color: lightgrey;
    overflow-y:auto;
}

.message_body{
    overflow-y:auto;
    padding-top:50px;
}

HTML片段：

<div class="message_container">
    <div class="message_header">
        <p> test </p>
        <p> test </p>
        <p> test </p>
        <p> test </p>
    </div>
    <div class="message_body">
        <p>content is longer</p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
                <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
                <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
                <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
                <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
    </div>
</div>

编辑：如果没有给出可靠答案，人们如何投票？我认为这个投票的事情需要受到质疑。我搜索了网站。我已经玩了这个问题足够长的时间。我在这里寻求帮助。谢谢。

编辑：将css类重命名为不太通用。

解决方案：

由@Pete提供。 message_body div和message_head div缺少宽度和高度的定义，甚至认为message_container（后来）定义了权重和高度。我更新了我的示例，这里是链接：http://jsfiddle.net/kcfTc/59/

CSS片段是：

.message_container{
    width=600px;
    height=395;
    position: relative; //new
}

.message_header{
    padding-bottom: 5px;
    font-size: 14px;
    position: fixed;
    width:600px;  //new
    height:50px;  //new
    background-color: white;  //modified
    overflow-y:auto;
}

.message_body{
    overflow-y:auto;
    top:55px;        //new
    bottom:0;        //new
    left:0; right:0; //new
    width: 100%;     //new
    position: absolute;//new
}

Answer 1

你是说这个意思吗？

http://jsfiddle.net/vdecree/kcfTc/10/

我想我已经看到了你的问题，但是我会看一下结构，因为它可能会更好。但是你只需要在身体顶部填充一些衬垫。

编辑* - 这个版本只是为了让事情更清晰，因此我们可以专注于您已命名为.body的div，我已将其更改为.content以避免与body混淆元件。我已经制作了黑色背景，所以我们专注于你想要用内容div实现的目标。没有你需要的东西：http://jsfiddle.net/vdecree/kcfTc/22/ - 我很乐意帮助你得到你需要的东西，但有一些细节尚不清楚。

<强>的CSS：

.body{
    overflow-y: visible;
    padding-top: 60px; /* push content down below fixed element */
}

Answer 2

只需给.body一个等于固定div高度的margin-top。这样，内容div堆叠在固定的下方。

编辑：同时为top:0;设置.header，固定的div将保留在顶部。

Answer 3

由@Pete提供。 message_body div和message_head div缺少宽度和高度的定义，甚至认为message_container（后来）定义了权重和高度。我更新了我的示例，这里是链接：

http://jsfiddle.net/kcfTc/59/

CSS片段是：

.message_container{
    width=600px;
    height=395;
    position: relative; //new
}

.message_header{
    padding-bottom: 5px;
    font-size: 14px;
    position: fixed;
    width:600px;  //new
    height:50px;  //new
    background-color: white;  //modified
    overflow-y:auto;
}

.message_body{
    overflow-y:auto;
    top:55px;        //new
    bottom:0;        //new
    left:0; right:0; //new
    width: 100%;     //new
    position: absolute;//new
}

Answer 4

这是您原来的jsfiddle链接：

对CSS的更改包括提供最高保证金，而不仅仅是使用＆＃34; top＆＃34;然后将它放在65px以获得更多空间，并按照您的提及定义高度和宽度。我确实包含了一个边框，这样如果你将它复制并粘贴到jfiddle中，就可以轻松查看该区域。显然，如果不想要，请删除该边框。

<强> CSS

.message_body{
position: absolute;
margin-top:65px;
height: 100px;
overflow-y:auto;
width: 500px;
border: 2px solid darkgray;
}

CSS：如何防止可滚动div的内容出现在固定div之后

4 个答案: