css - 将 Div 扩展到其容器的长度

Question

我正在尝试扩展左侧边栏，使其跨越页面(或容器 DIV)的长度。我尝试将容器的高度设置为 100%，然后将侧边栏的高度设置为 100%，但这没有用。

这是我的代码:

div#container
{
overflow: hidden;
margin-left: auto;
margin-right: auto;
margin-top: 0px;    
padding-bottom: 10px;
width: 880px;   
height: 100%;
text-align: left;
}

div#left
{
float: left;
width: 280px;
height: 100%;   
padding: 4px;   
background: #F1D7A5;
}

页面如下所示:http://www.studentbridges.org/new/

任何关于如何扩展侧边栏的意见都将不胜感激!

谢谢!

~诺艾尔

Answer 1

我通常通过将侧边栏的背景作为图像放在侧边栏的容器上并沿 y 轴重复它来解决这个问题。这实际上并没有拉伸(stretch)你的侧边栏，但它看起来是一样的。在您的情况下，您可以直接截取页面的打印屏幕，将其裁剪为 1px 高度和 880px 宽度，并将其设置为 #container 的背景:

background: url(<path_to_image>) repeat-y center;

您也可以从 #left 移除背景。避免使用表格的一切!