/* CSS is inline this time */<!DOCTYPE html><html><head><title>Page Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"><style>
body {background-color: yellow;
}
div#custom-header, div#custom-footer {
display: block;
box-sizing: border-box;
}
div#custom-header > header > h1 {
height: 614px;
line-height: 614px; /* same value as div#custom-heading height parent property */
}
div#custom-footer > footer > h4 {
height: 100px;
line-height: 100px; /* same value as div#custom-heading height parent property */
}</style></head><body><!-- Navigation bar --><div class="w3-row"><div class="w3-col l12"><nav class="w3-bar w3-black"><a href="#" class="w3-bar-item w3-button">Home</a><a href="#" class="w3-bar-item w3-button">Page1</a><a href="#" class="w3-bar-item w3-button">Page2</a><a href="#" class="w3-bar-item w3-button">About</a></nav></div></div><!-- Header --><div class="w3-row"><div id="custom-header" class="w3-col l12 w3-center w3-grey"><header><h1>IMAGE AS HEADER GOES HERE</h1></header></div></div><!-- Footer --><div class="w3-row"><div id="custom-footer" class="w3-col l12 w3-center w3-teal"><footer><h4>Footer</h4></footer></div></div></body></html>
Hi, as shown in the picture above a have an issue whilst scrolling out the html.index page with mouse (Ctrl + middle mouse button) OR zooming out with keyboard (Ctrl + minusSign). If user would enter this simple flat design index.html home page and accidentally would scroll out the user would see BODY html element background-color: yellow. I have no idea how to hide this in HTML/CSS way unless it's idea of preventing such a scrolling behaviour with Javascript itself. Any optional ideas would be appreciated. Thanks.
