Jon Jon - 3 months ago 33
CSS Question

CSS Sidebar Height 100%

I've been banging my head against the wall for hours trying to figure out this issue and think it must be something small I'm missing. I've searched online, but nothing I have found seems to work. The HTML is:

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


My full CSS is:

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


I'd like the sidebar to stretch in height with the content of my page and leave the sidebar bottom image always at the bottom of the sidebar.

Answer

Clearly you are looking for the Faux columns technique :-)

By how the height-property is calculated, you can't set height: 100% inside something that has auto-height.