Sidebar to the bottom of the page

Sidebar to the bottom of the page

I'm wondering how to get my sidebar to the bottom of the page. There's a
background image of a map but I'd like it to stay where it is and just
extend the color to the bottom of the page.
Here's the link to my web page And here's part of my CSS:
/* Sidebar */
#sidebar {
height: 100%;
width: 318px;
float: left;
position: absolute;
padding: 20px 0 0 0;
background-color: #e7d9c9;
background-repeat: no-repeat;
background-image: url('/imgs/map.png');
}
#sidebar h1 {
padding: 0 0 20px 0;
margin: 0 20px 20px 20px;
border-bottom: 1px solid #62879e;
}
.sidetext {
padding: 5px 20px;
font-size: 22px;
color: #62879e;
font-family: Helvetica Neue;
padding-bottom: 110px;
}
.sidelink ul {
margin: 0 20px 0 20px;
padding: 0;
}
.sidelink li {
display: block;
list-style: none;
}
.sidelink li a {
display:block;
font-family: Helvetica Neue;
font-size:16px;
color: #62879e;
text-decoration:none;
border-bottom: 1px solid #62879e;
padding: 10px 0 10px 0;
}
.sidelink li a:hover {
border-left:14px solid #1e416f;
color: #1e416f;
padding: 10px 10px 10px 10px;
}
HTML:
<!-- SIDEBAR -->
<div id="sidebar">
<h1>Caul / Cbua</h1>
<div class="sidetext">
Duis aute irure dolor in rep-rehenderit in voluptate velit esse cillum
dolor eu fugiat nulla pariatur. fugiat nulla pariatur.
</div>
<h1>Commit</h1>
<div class="sidelink">
<ul>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
</ul>
</div>
</div>