边栏位于页面底部

Question

我想知道如何将我的侧边栏的颜色一直到页面底部，并且侧边栏和底部之间没有任何空白区域的页面。

我在Firefox中看到的是：

我在Chrome中看到的内容：

Here's the link to my web page 这是我的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>

Answer 1

#sidebar {
    background: url("/imgs/map.png") no-repeat scroll 0 0 #E7D9C9;
    float: left;
    height: 100%;
    padding: 20px 0 0;
    width: 318px;
}

将侧边栏的样式更改为上述样式。