边栏页面

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; 
} 

更改样式侧边栏上面的样式。