我试图在父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