Extending a Sidebar All The Way Down
This is an issue I’ve had some trouble with, and finally spent some time to figure it out.
The problem is, when trying to make a sidebar, the sidebar would not extend all the way to the footer unless there was content in it. In order to fix this, you need to do two things in your CSS.
1st, you must define your body to have a height of 100%. Then, in your sidebar div you then define that with a height of 100%. YOU MUST BOTH OF THESE. Here is what it should look like:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
/* Allow IE/Win to resize the document */
font-size: 80%;
color: black;
background: #ffffff;
margin: 0;
padding: 0;
border: none;
height: 100%;
}
#sidebar {
width: 340px;
float: left;
clear: both;
margin-bottom: 4em;
padding: 20px;
height: 100%;
}