Question

我创建了一个包含标题，侧边栏的html页面，其间有一个包含产品的空白页面。它适用于有限的产品但在添加许多产品后页面尺寸增加但侧边栏高度保持不变，一半该页面有侧栏，一半没有任何内容。请指导我如何将侧栏拉伸到页面长度。

如果我从这里增加高度，它会设置侧边栏高度，但我可以给它一个固定值，因为页面中可以有任意数量的产品。

element.style {
    height: 843px;
}
aside#sidebar {
    background: url("../images/sidebar.png") repeat scroll 0 0 #E0E0E3;
    float: left;
    margin-top: -4px;
    min-height: 500px;
    width: 23%;
}
html, div, map, dt, isindex, form, header, aside, section, section, article, footer {
    display: block;
}

Answer 1

使你的侧边栏css像.sidebar {width：100％; float：left;}它将获得父宽度.sidebar：在{clear：left}之后并删除你提到的身高像身高：843px; 跳这将帮助你

Answer 2

将position:relative应用于包含产品的页面，并通过应用

绝对将侧边栏置于其中

aside#sidebar {
 position:absolute;
 background: url("../images/sidebar.png") repeat scroll 0 0 #E0E0E3;
 top: 0;
 left:0;
 bottom:0;
 width: 23%;
}

apllying top:0;和bottom:0会使元素始终延伸到其容器的高度。同时将padding应用于与侧边栏相等的容器，以便其内容不会被隐藏。

像这样JSFiddle

Answer 3

您可以这样做的一种方法是测量产品div的scrollHeight并相应地设置侧边栏的最小高度。

只要您的产品高度发生变化，请执行此操作：

$(".sidebar").css("min-height", document.getElementById("content").scrollHeight);

JSFiddle

您也可以将其设置为元素的高度：

$(".sidebar").css("min-height", $(".content").height());

如何动态增加Side-bar高度？

3 个答案:

JSFiddle

JSFiddle