First things first, check out this HTML template:
<div id="content">
<header>...</header>
<div id="pages">
<div class="page">...</div>
<div class="page">...</div>
<div class="page">...</div>
</div>
</div>
You'll notice that the pages are located beneath the header and are initially hidden until triggered by JS code.
Everything seems to be functioning fine, however, there's an issue where the page extends beyond the screen height, causing a scrollbar to appear outside the borders of the screen.
+--------------------------+ ---------
| HEADER | |
| | |
*--------------------------* |
| PAGE | |
| content | | - SCREEN SIZE
| content #| |
| content #| |
| content #| |
+--------------------------+ ---------
| content #|
| content #| # signifies the scrollbar
*--------------------------*
Even when the page doesn't have any actual content, it still occupies the full size of the screen.
Here's the relevant CSS:
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
header {
background-color: #fdc162;
padding-bottom: 1em;
height: auto;
}
.page {
display: block;
position: absolute;
width: 100%;
height: 100%;
visibility: hidden;
overflow: auto;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
So why is this happening, and how can I fix it without relying on JavaScript?