我想知道如何讓我的側邊欄的顏色一路到頁面的底部,沒有側邊欄和頁面底部之間任何空白底部。邊欄頁面
我在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>
我錯過了什麼嗎?它似乎已經做了你所要求的。 – j08691
我只是看了一下,你所描述的是它在Chrome中的表現。另外 - 你不需要漂浮與位置:絕對。 –
我在側邊欄和頁面底部之間看到大約20px的空間。我正在使用Google Chrome。 –