CSS边栏高度100％ [英] CSS Sidebar Height 100%
问题描述
我一直在敲我的头靠在墙上几个小时试图找出这个问题，认为它必须是小我缺少的东西。我在网上搜索，但没有发现似乎工作。 HTML是：
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>
我的完整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;
}
我希望侧边栏的高度与我的页面的内容并将侧栏底部图像始终放在侧边栏的底部。
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.
推荐答案
显然，您正在寻找虚假列技巧： - ）
Clearly you are looking for the Faux columns technique :-)
通过如何计算height-property，您不能设置 height：100％里面有自动高度。
By how the height-property is calculated, you can't set height: 100% inside something that has auto-height.
这篇关于CSS边栏高度100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
