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
}