几个小时以来，我一直在用头撞墙，试图弄清楚这个问题，我想这一定是我遗漏了一些小东西.我在网上搜索过，但似乎什么也没找到.HTML是:
<body>
<div id="header">
<div id="bannerleft">
</div>
<div id="bannerright">
<div id="WebLinks">
<span>Web Links:</span>
<ul>
<li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li>
<li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li>
<li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li>
</ul>
</div>
</div>
</div>
<div id="Sidebar">
<div id="SidebarBottom">
</div>
</div>
<div id="NavigationContainer">
<ul id="Navigation">
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
</ul>
</div>
<div id="Main">
<!-- content -->
</div>
</body>
我的完整CSS是:
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Calibri, Sans-Serif;
height: 100%;
}
#header {
width: 100%;
z-index: 1;
height: 340px;
background-image: url("../../Content/images/bannercenter.gif");
background-repeat: repeat-x;
}
#header #bannerleft {
float: left;
background-image: url("../../Content/images/bannerleft.gif");
background-repeat: no-repeat;
height: 340px;
width: 439px;
z-index: 2;
}
#bannerright {
float: right;
background-image: url("../../Content/images/bannerright.gif");
background-repeat: no-repeat;
width: 382px;
height: 340px;
background-color: White;
z-index: 2;
}
#Sidebar {
width: 180px;
background: url("../../Content/images/Sidebar.png") repeat-y;
z-index: 2;
height: 100%;
position: absolute;
}
#SidebarBottom {
margin-left: 33px;
height: 100%;
background: url("../../Content/images/SidebarImage.png") no-repeat bottom;
}
#NavigationContainer {
position: absolute;
top: 350px;
width: 100%;
background-color: #bbc4c3;
height: 29px;
z-index: 1;
left: 0px;
}
#Navigation {
margin-left: 190px;
font-family: Calibri, Sans-Serif;
}
#Navigation li {
float: left;
list-style: none;
padding-right: 3%;
padding-top: 6px;
font-size: 100%;
}
#Navigation a:link, a:active, a:visited {
color: #012235;
text-decoration: none;
font-weight: 500;
}
#Navigation a:hover {
color: White;
}
#WebLinks {
float: right;
color: #00324b;
margin-top: 50px;
width: 375px;
}
#WebLinks span {
float: left;
margin-right: 7px;
margin-left: 21px;
font-size: 10pt;
margin-top: 8px;
font-family: Helvetica;
}
#WebLinks ul li {
float: left;
padding-right: 7px;
list-style: none;
}
#WebLinks ul li a {
text-decoration: none;
font-size: 8pt;
color: #00324b;
font-weight: normal;
}
#WebLinks ul li a img {
border-style: none;
}
#WebLinks ul li a:hover {
color: #bcc5c4;
}
我希望侧边栏的高度与我的页面内容一起伸展，并将侧边栏底部的图像始终留在侧边栏的底部.