Header disappears when scrolling with Textarea - html

Question

I'm trying to create a small Notepad application online using just CSS and HTML. For some reason, my application creates a weird glitch where you scroll down in the text area far enough and scroll back up to find the header is missing.
https://jsfiddle.net/2v7ptadh/
How can I fix this issue?
This is the CSS code that is creating the error. If you want to view the full code, click on the JS Fiddle link above.
html,
body {
display: block;
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #888;
height: 100%;
width: 100%;
overflow-y: hidden;
}
div#header {
display: block;
width: 100%;
height: 40px;
border-left: 2px solid rgb(100, 125, 130);
border-top: 2px solid rgb(150, 175, 140);
border-bottom: 2px solid rgb(60, 48, 75);
border-right: 2px solid rgb(80, 84, 90);
background: #bbb;
box-sizing: border-box;
line-height: 40px;
text-align: center;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-weight: 900;
z-index: 4
}
div#app {
z-index: 2;
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
}
textarea#app-input {
display: block;
box-sizing: border-box;
padding: 4px;
margin: 0;
border: none;
outline: none;
width: 100%;
height: 100%;
line-height: 23px;
font-size: 20px;
resize: none;
}
textarea::selection {
background: #000;
color: #fff;
}
Video of issue: http://recordit.co/2AxYmb9XxV

Answer 1

If you're going to set html/body to height: 100%; overflow-y: hidden; then #app shouldn't be height: 100% - change that to height: calc(100% - 40px) where 40px is the header height. That will keep everything in the viewport.
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
html,
body {
display: block;
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #888;
height: 100%;
width: 100%;
overflow-y: hidden;
}
div#header {
display: block;
width: 100%;
height: 40px;
border-left: 2px solid rgb(100, 125, 130);
border-top: 2px solid rgb(150, 175, 140);
border-bottom: 2px solid rgb(60, 48, 75);
border-right: 2px solid rgb(80, 84, 90);
background: #bbb;
box-sizing: border-box;
line-height: 40px;
text-align: center;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-weight: 900;
z-index: 4
}
div#app {
z-index: 2;
display: block;
width: 100%;
height: calc(100% - 40px);
box-sizing: border-box;
padding: 0;
margin: 0;
}
textarea#app-input {
display: block;
box-sizing: border-box;
padding: 4px;
margin: 0;
border: none;
outline: none;
width: 100%;
height: 100%;
line-height: 23px;
font-size: 20px;
resize: none;
}
textarea::selection {
background: #000;
color: #fff;
}
<div id="header">ONLINE NOTEPAD</div>
<div id="app">
<textarea id="app-input"></textarea>
</div>

Answer 2

try removing overflow-y:hidden from html and body
html,
body {
display: block;
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #888;
height: 100%;
width: 100%;
}