I have a simple web application (found here: My Web Application) that is set up with a fixed sidebar menu that is partially covered by the content of the page. The application also has a fixed header that contains the "hamburger" icon which, when clicked, reveals the rest of the sidebar.
The HTML make up of the page is the following:
<body>
<input type="checkbox" id="sidebartoggler" name="" value="" />
<div class="page-wrap">
<nav id="navbar">
<label for="sidebartoggler" class="toggle">
≡
</label>
</nav>
<div class="page-content">
@RenderBody()
</div>
<div class="sidebar">
<ul>
<li><a href="#"><i class="fa fa-home"></i> <span>Home</span></a></li>
<li><a href="#"><i class="fa fa-info-circle"></i> <span>About</span></a></li>
<li><a href="#"><i class="fa fa-envelope-square"></i> <span>Contact</span></a></li>
</ul>
</div>
</div>
</body>
The CSS is the following:
html, body, .page-wrap {
width: 100%;
height: 100%;
}
.page-content {
position: relative;
top: 45px;
left: 55px;
padding: 10px;
-webkit-transition: .5s;
transition: .5s;
z-index: 1;
background: #eee;
height: 100%;
}
#navbar {
height: 45px;
width: 100%;
position: fixed;
background: black;
z-index: 2;
}
.toggle {
text-decoration: none;
font-size: 30px;
color: white;
position: fixed;
top: 0px;
left: 20px;
cursor: pointer;
z-index: 3;
}
.sidebar {
position: fixed;
top: 45px;
right: 0px;
left: 0px;
bottom: 0;
height: 100vh;
width: 160px;
padding: 10px;
background: #333;
z-index: 0;
}
.sidebar ul {
margin: 0;
margin-top: 50px;
padding: 0;
list-style: none;
}
.sidebar ul a {
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
margin-bottom: 16px;
-webkit-font-smoothing: antialiased;
}
.sidebar ul a i {
padding: 10px;
}
.sidebar ul a:hover {
color: white;
}
#sidebartoggler {
display: none;
}
#sidebartoggler:checked + .page-wrap .page-content {
left: 180px;
transition: .5s;
}
Now the sidebar extends all the way to the bottom, infinitely, since I've set it up with position: fixed; and bottom: 0; and that is beautiful. The button works as it should. The page content slides on and off as it should. But on the Home page, when you scroll down a but, you will see that the page content's background all of a sudden goes transparent.
Now, before I added the line for html, body and page-wrap to have height and width of 100% the About and Contact pages' content background ended where the content ended, which makes sense. Then after scouring StackOverflow for hours, I added that line and added height: 100%; to page-content. It fixes the problem with About and Content and extends their background all the way to the bottom but it breaks the Home page where once you scroll past where the bottom of the page was when it loaded you see that it doesn't have any background left (its the body's background that you see).
Also, if you're on OS X, even on About and Contact pages if you scroll past the edges (sort of forcing it to scroll past where it can't), you can clearly see the div doesn't extend all around.
Here are some images to show what I'm talking about:
Home Page (transparent background after a certain point):
Contact Page (before adding height: 100%;):
And Contact Page (after):
So that is the problem. What I would like to know is if there is a way to fix this thing so I can have a seamless background for this div that extends all the way to the bottom and perhaps even top (I don't mind doing top: 0 for it if that is what it takes). And doesn't lose color (what is that about anyway). If there's a hack, I am happy to try it just as long as it works and doesn't break.
