css - CSS:如何防止可滚动div的内容出现在固定div的后面

得到了一个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
}

最佳答案

你是这个意思吗

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 */
}