僅滾動底部div，菜單和帖子div已修復

非常感謝任何花時間閱讀此問題的人。我真誠地希望，我提供了一個腦筋急轉彎，因爲我已經全面搜索了一個解決方案，到目前爲止它已經躲過了我。我是一個新手，並從這個網站獲得了很多優秀的創意，所以我很抱歉，如果這是一個容易的...僅滾動底部div，菜單和帖子div已修復

我想創建一個網頁，用div作爲菜單欄頂部，一個124px高的div，將用於編寫帖子並通過ajax提交，底部div應填充頁面的其餘部分，並將顯示所有帖子的位置。

底部div是我遇到麻煩的地方。我希望所有3個div保持在原來的位置，頁面不應該從底部滾動，所以菜單欄總是可見的，只有底部div應該滾動，當有更多的消息比div的大小。

我將我一直試圖創建的內容轉移到JSFIDDLE。任何建議，將不勝感激。

HTML：

<div id="chatWrapper"> 
    <div id="room">testroom</div> 
    <div id="post">Msg writing area 124px high ...</div> 
    <div id="mesg">Posts ...<br> 
     1<br> 
     2<br> 
     3<br> 
     4<br> 
     5<br> 
     6<br> 
     7<br> 
     8<br> 
     9<br> 
     10<br> 
     11<br> 
     12<br> 
     13<br> 
     14<br> 
     15<br> 
     16<br> 
     17<br> 
     18<br> 
     19<br> 
     20<br> 
     21<br> 
     22<br> 
     23<br> 
     24<br> 
     25<br> 
     26<br> 
     27<br> 
     28<br> 
     29<br> 
     30<br> 
    </div> 
</div>

CSS：

html, 
body { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 

body { 
    background: #000000; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 12px; 
    line-height: 1.1em; 
    color: #ffffff; 
} 

#before, #after { 
    width: 98%; 
    height: 4px; 
    margin: 0 auto; 
} 

#topbar { 
    width: 98%; 
    height: 24px; 
    margin: 0 auto; 
} 

#menuDiv { 
    height: 24px; 
    display: table-cell; 
    vertical-align: middle; 
    padding-left: 8px; 
} 

#menu-button { 
    height: 24px; 
    cursor: pointer; 
} 

#menu { display: none; overflow: hidden; } 

#chatWrapper { 
    width: 98%; 
    min-height: 96%; 
    height: 96%; 
    margin: 0 auto; 
    overflow: hidden; 
} 

#room { display: none; } 

#post { 
    width: 98%; 
    height: 120px; 
    overflow: hidden; 
    margin: 0 auto; 
} 

#mesg { 
    width: 98%; 
    overflow: scroll; 
    margin: 0 auto; 
}

來源

2015-07-22 Martin M

爲了保持頂欄的頂部，您可以使用position: fixed; top: 0;

查看更新後的提琴：http://jsfiddle.net/jLe1552h/16/

position: fixed;表示容器應保持其位置（相對於瀏覽器視口）並且不應受滾動的影響。

top: 0;設置位置。它表示容器頂部邊緣與瀏覽器視圖邊框之間的間距應爲零。

您還可以使用left，right和bottom作爲其他方面併合並這些值。

另外，你也可以看看HTML5的flexbox。

來源

2015-07-22 07:12:11 maja

非常感謝您的回答和示例。但是，在提供的小提琴中有30行（模擬製作的帖子），我無法看到它們，因爲我無法向下滾動。我看着你的例子，看起來帖子區域不再存在。 –

這很奇怪，它們在我看來。經過Chrome，Firefox和IE測試。 – maja

我現在明白你的意思了。您將「mesg」div設置爲position：fixed並且告訴它從窗口的下方開始12％。所以這就是爲什麼我沒有看到124px高的「後」div的原因，因爲「爛攤子」給予了更多的空間。我試圖寫一個有趣的小聊天腳本，其中一個關鍵的事情是，如果他們在移動設備上，我希望他們能夠隱藏「後」div（使用jQuery切換），並讓「mess」div佔據chatWrapper的全部高度。我最誠摯的歉意是不盡快表達。 –

僅滾動底部div，菜單和帖子div已修復

回答

相關問題