Eternity Eternity - 3 months ago 25
HTML Question

HTML scrollable div hides header

I'm trying to create an infinite height contenteditable div inside a parent div, which displays a scrollbar whenever content reaches the end of the screen. However, I'm running into a problem. If the text inside the contenteditable div (

page
) reaches the end of the screen, it hides the header (
menu
) and displays the bottom of the page, but it's impossible to get back again unless I refresh the page. Also, the scrollbar doesn't allow scrolling.

Here's a fiddle with everything so far, and an explanation inside.

How can I get it so that the scrollbar appears on the parent (
content
) div, filling 100% of the screen's remaining height without overflowing, and have it so that when I add content, it doesn't hide the menu?

EDIT: If you're going to immediately downvote my question, tell me how I can improve it.

Answer

/* 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>

I have changed the css of #page and #menu. Now the menu is fixed and the page has the scroller in it if the content grows.