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

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

正如下面@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 2

只是给.body一个边距等于固定div的高度。这种方式内容div被堆叠在固定的下面。

编辑：也设置top:0;为.header和固定的div将保持在顶部。

Answer 3

你的意思是这样吗？

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

我觉得我看到你的问题，但是我想看看结构，因为它可能会更好。但你只需要在你身体的顶部填充一些填充物。

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

CSS：

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

Answer 4

这将会把你原来的​​链接：

更改CSS包括给予而不是仅仅使用“顶部”，并将其放在65像素处，以获取更多空间，并定义您所提及的高度和宽度。我确实包含了一个边框，因此如果您将其复制并粘贴到jfiddle中，则可以轻松查看该区域。如果不需要，显然只是删除边框。

CSS

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