0

我正在尝试扩展我的左侧边栏，使其跨越页面（或容器 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/

任何关于如何扩展侧边栏的输入将不胜感激！

谢谢！

~诺艾尔

4

2 回答 2

0

将高度设置为 100% 会限制容器的高度。如果您将容器设置为您希望的像素高度，则子 div 将扩展其高度以匹配。因为您的下 div 是其容器的子 div，所以 height: 100% 只会导致容器 div 中剩余的长度，如您所见。

于 2012-07-27T20:05:00.033 回答
0

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

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

您也可以#left从那时起删除背景。一切都避免使用表格！

于 2012-07-29T00:26:57.413 回答