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

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

Answer 2

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

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

您也可以从#left删除背景。一切都是为了避免使用表格！

将Div的长度扩展为容器

2 个答案: