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