Can't get "content" div to extend length of page - html

Question

I have Googled this and tried all they suggested and it doesn't seem to be working.
I am making a template - so it all has to be in one HTML file. I am guessing something is screwy with my CSS that I'm just not catching... I've scanned it several times though.
Picture of problem (I want the white to extend to the bottom of the page; even if there isn't enough content):
CSS (there is more, but I figure these are the only ones that matter):
html, body
{
padding: 0px;
min-height: 100%;
margin: auto;
background-image: url("http://www.pixieduststudio.net/images/stripes.png");
background-repeat: repeat;
}
#wrapper
{
width: 80%;
margin: auto;
background-color: transparent;
}
#navbar
{
background-color: white;
text-align: center;
width: 100%;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
display: block !important;
margin: auto;
height: 75px;
}
#sidenav
{
width: 20%;
float: left;
border-bottom-left-radius: 5px;
border-right: 1px solid pink;
background-color: white;
}
#content
{
padding: 25px;
width: 80%;
float: left;
background-color: white;
margin: auto;
}
#content #pageTitle
{
margin: 0;
padding: 25px;
letter-spacing: 3px;
}
#pageContent, img
{
width: 80%;
}
HTML
<div id="wrapper">
<div id="navbar" class="navbar navbar-default" role="navigation">
<ul id="nav">
<!-- LINK ARE HERE BUT I REMOVED THEM -->
</ul>
</div>
<div id="sidenav">
<div id="socialBar">
<img src="http://www.pixieduststudio.net/images/facebook.png">
<img src="http://www.pixieduststudio.net/images/Instagram.png">
<img src="http://www.pixieduststudio.net/images/EmailUs.png">
</div>
<div id="shopBar">
<img src="http://www.pixieduststudio.net/images/shoppen.png">
<hr class="section">
<figure>
<img class="icon" src="http://www.pixieduststudio.net/images/bag.png">
</figure>
<img src="http://www.pixieduststudio.net/images/shopinfpen.png">
<hr class="section">
<div class="sidelinks">
<li>Meet Pixie</li>
<li>Shipping</li>
<li>Site Map</li>
<li>Order Tracking</li>
<li>Guest Chat</li>
</div>
<img src="http://www.pixieduststudio.net/images/searchpen.png">
<hr class="section">
<p style="margin: 25px;">%SEARCH_SITE%</p>
</div>
</div>
<div id="content">
<img id="pageTitle" class="img-responsive" src="http://www.pixieduststudio.net/images/headertitle.png" />
<hr>
%CONTENT%
<!--<p id="pageContent" style="padding: 25px;">
<img src="http://www.pixieduststudio.net/images/camp.png">
</p>-->
</div>
<div id="foot">
<!--<img src="images/footer.png">-->
</div>
</div>

Answer 1

You have to move background-color: white; to #wrapper, which is the container of both the content and the sidebar, to make the full box bg white.
Change #sidenav and #content to display: inline-block rather than float: left to allow #wrapper to adjust to the height of its contents. Add vertical-align: top so they will properly top-align to eachother.
#wrapper
{
width: 80%;
margin: auto;
background-color: white;
}
#sidenav
{
width: 20%;
display: inline-block;
vertical-align: top;
background-color: white;
}
#sidenav .nav {
border-bottom-left-radius: 5px;
border-right: 1px solid pink;
}
#content
{
padding: 25px;
width: 80%;
display: inline-block;
vertical-align: top;
margin: auto;
}
You'll also have to get rid of the 1px right border on #sidenav, which will make the contents of #wrapper add up to more than 100% of its with (and therefore wrap).
Change your sidenav content to:
<div id="sidenav">
<div class="nav">
...
</div>
</div>

Answer 2

In order to fix this, you can change the height of your container to use the vh unit
In your css, set the height of your main content container to:
#content
{
height: 100vh;
}
This will set the height of the container to 100% of the browsers vertical height in the viewport, please note this may have compatability issues with older browsers.
In the case of your problem, you will also need to set the parent elements height to 100vh too, this is because the child element (your main content) will fit to 100% of its parents height, which doesn't fit the whole page, to fix this, add the following to your css:
#wrapper
{
height: 100vh;
}
The child elements will now be able to fill the entire screen.

Answer 3

Consider the following example...
CSS
html,
*
{
border : 0;
box-sizing : border-box;
margin : 0;
padding : 0;
}
#wrapper
{
background-color : red;
display : flex;
min-height : 100vh;
}
#col-1
{
background-color : blue;
display : block;
float : left;
width : 25%;
}
#col-2
{
background-color : yellow;
display : block;
float : left;
width : 75%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport"
content = "width = device-width, initial-scale = 1.0"
>
<link href = "CSS/Example.css"
rel = "stylesheet"
type = "text/css"
>
<style>
</style>
</head>
<body>
<div id="wrapper">
<div id = "col-1">
<p>Column1</p>
<p>Column1</p>
<p>Column1</p>
</div>
<div id = "col-2">
<p>Column2</p>
</div>
</div>
</body>
</html>
The * section in the CSS file gets rid of any default borders, margins and padding for all elements unless they are subsequently specified. The box-sizing : border-box; line makes sure that any borders, margins and padding are contained within the specified width and height, which makes laying out a page much easier.
Please visit https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for an explanation of flexbox.
Applying this structure to your page should solve the specified problem nicely.
If you have any questions, then please feel free to reply.