如何动态增加侧栏高度

How to increase Side-bar Height dynamically?

本文关键字：增加 高度 动态 何动态      更新时间：2023-09-26

我创建了一个包含页眉、侧边栏的html页面，中间有一个包含产品的空白页面。。它适用于有限的产品，但在添加了许多产品后，页面大小会增加，但侧边栏高度保持不变，一半的页面有侧栏，一半没有侧栏。。请指导我如何将侧边栏扩展到页面长度。

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

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;
}

将position:relative应用于拥有产品的页面，并通过应用将侧边栏绝对定位在其中

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

应用CCD_ 2和CCD_。还将padding应用于与侧边栏相等的容器，这样它的内容就不会被隐藏。

类似这样的JSFiddle

让你的侧边栏像css一样。侧边栏｛width:100%；float:left；｝它会得到父级宽度。侧边栏：在｛clear:left｝之后，并删除你提到的高度，比如高度：843px；跳转这将帮助您

实现这一点的一种方法是测量productsdiv的scrollHeight，并相应地设置侧边栏的最小高度。

每当您的产品div的高度发生变化时都要执行此操作：

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

JSFiddle

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

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

JSFiddle

相关文章：