我試圖在父div內創建一個無限高度contenteditable div，當內容到達屏幕末端時顯示滾動條。但是，我遇到了一個問題。如果contenteditable div（page）中的文本到達屏幕末尾，它將隱藏標題（menu）並顯示頁面底部，但除非刷新頁面，否則無法再返回。另外，滾動條不允許滾動。HTML可滾動div隱藏標題
Here's a fiddle with everything so far，以及裏面的解釋。
我怎樣才能得到它，使滾動條出現在父母（content）股利，充滿屏幕的剩餘高度的100％沒有溢出，並有它，這樣，當我添加內容時，它不會隱藏菜單？
編輯：如果你要立即downvote我的問題，告訴我如何能改善它。
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
overflow-x: hidden;
overflow-y: hidden;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ============================================================
Default Window CSS
============================================================ */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
html {
width: 100%;
min-height: 100% !important;
height: 100%;
-webkit-font-smoothing: antialiased;
}
html * {
color: #222;
}
p {
font-size: 13px;
}
h1 {
font-size: 20px;
}
body {
width: 100%;
min-height: 100% !important;
height: 100%;
-webkit-animation: fadeIn 0.5s;
}
body {
font-family: 'Segoe UI', Arial, sans-serif;
}
#container {
height: 100%;
}
#content {
background: #eee;
font-size: 10px;
min-height: 100%;
padding: 32px;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
overflow-y: scroll;
}
#page {
font-size: 14px;
background: #fff;
width: 800px;
padding: 32px;
outline: none;
resize: none;
box-shadow: 0 8px 64px rgba(0, 0, 0, 0.25);
height: 300px;
overflow: auto;
margin-top: 50px;
}
#footer {
display: flex;
height: 32px;
padding: 8px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
/* ============================================================
MENU
============================================================ */
#menu {
position: fixed;
cursor: default;
text-align: center;
background: linear-gradient(#fbfbfb, #efefef);
box-shadow: inset #bfbfbf 0 -1px 0 0;
height: 28px;
top: 0;
z-index: 100;
width: 100%;
}
#titlebar {
top: 6px;
}
#titlebar {
position: relative;
top: 8px;
}
#titlebar > p {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
pointer-events: none;
}<div id="container">
<div id="menu">
<div id="titlebar">
<p>Title</p>
</div>
<div id="controls" onmousedown="app.cancelMoveEvent()">
<!-- Close, Minimize, Maximise -->
</div>
</div>
<div id="content">
<div id="page" contenteditable="true">This should appear on 100% of the screen's remaining height and be scrollable, appearing as an endless page to write in. However, when this happens, the menu at the top of the screen, as well as the top arrow of the scrollbar, disappears, and there is no way to get it back. Only the parent div and the contents should be scrollable. Paste this text a few times to see what I mean.This should appear on 100% of the screen's remaining height and be scrollable, appearing as an endless page to write in. However, when this happens, the menu at the top of the screen, as well as the top arrow of the scrollbar, disappears, and there is no way to get it back. Only the parent div and the contents should be scrollable. Paste this text a few times to see what I mean.This should appear on 100% of the screen's remaining height and be scrollable, appearing as an endless page to write in. However, when this happens, the menu at the top of the screen, as well as the top arrow of the scrollbar, disappears, and there is no way to get it back. Only the parent div and the contents should be scrollable. Paste this text a few times to see what I mean.This should appear on 100% of the screen's remaining height and be scrollable, appearing as an endless page to write in. However, when this happens, the menu at the top of the screen, as well as the top arrow of the scrollbar, disappears, and there is no way to get it back. Only the parent div and the contents should be scrollable. Paste this text a few times to see what I mean.This should appear on 100% of the screen's remaining height and be scrollable, appearing as an endless page to write in. However, when this happens, the menu at the top of the screen, as well as the top arrow of the scrollbar, disappears, and there is no way to get it back. Only the parent div and the contents should be scrollable. Paste this text a few times to see what I mean.
</div>
</div>
<div id="footer">
</div>
</div>我已經改變#page和#menu的CSS。現在菜單已修復，如果內容增長，頁面中就會有滾動條。
只需將overflow-y: scroll;添加到#container似乎解決了我的問題。它使正常的滾動條正常工作，並允許滾動時顯示標題。
這會在整個頁面上添加一個滾動條，包括菜單。我只想讓滾動條出現在頁面的父div中。 – driima
你可以爲'＃page'設置一個不超過'body'-element的明確高度，並在＃頁面上設置'overflow：auto;'。 – insertusernamehere
您可以按照網站的規則改善您的問題：尋求調試幫助的問題（「爲什麼不是這個代碼工作？」）必須包含所需的行爲，特定的問題或錯誤以及重現它所需的最短代碼* *在問題本身**。另外：jsfiddle.net的鏈接必須附有代碼。請使用代碼工具欄按鈕或CTRL + K鍵盤快捷鍵將所有代碼縮進4個空格。要獲得更多編輯幫助，請單擊[？]工具欄圖標。如果你不能花時間閱讀規則，那麼當你投降時，不要抱怨。 – Pete
爲了記錄，我沒有抱怨。 – driima