/* 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>
Вы можете установить явную высоту для '# страницы', которая не превышает' body'-element, и установить 'overflow: auto;' на '# page'. – insertusernamehere
Вы можете улучшить свой вопрос, следуя правилам сайта: вопросы поиска справки по отладке («почему этот код не работает?») Должны включать в себя желаемое поведение, конкретную проблему или ошибку и кратчайший код, необходимый для его воспроизведения * * в самом вопросе **. Также: Ссылки на jsfiddle.net должны сопровождаться кодом. Пожалуйста, отпечатайте весь код на 4 пробела, используя кнопку панели инструментов кода или сочетание клавиш CTRL + K. Для получения дополнительной помощи по редактированию щелкните значок панели инструментов [?]. Если вы не можете потратить время на чтение правил, тогда не жалуйтесь, когда вы получаете downvoted. – Pete
Для записи я не жалуюсь. – driima