Javascript 如何将固定位置元素限制为浏览器窗口的高度？

我有一个带有固定位置边栏的页面。我想侧边栏是滚动的情况下，它的内容太高，以适应在浏览器窗口

但是，当我使用

overflow-y:scroll

设置侧边栏样式时，滚动条会显示出来，但会被禁用，因为侧边栏的高度足以容纳所有内容，即使对于浏览器窗口来说它太高了

有没有办法限制固定位置元素的高度，使其内容延伸到浏览器窗口底部以下时滚动

我的应用程序可以接受jQuery解决方案。请注意，侧边栏不会一直延伸到窗口顶部

---

：此版本显示标题，边栏必须显示在标题下方。

您需要设置边栏的高度。现在，侧边栏与文本块一样高，并在视口下方运行（但您看不到）。如果您将边栏的高度设置为100%（或其他），那么如果无法同时显示边栏的所有内容，边栏将显示一个滚动条

因此，您需要改变这一点：

div#fixed-div {
    position: fixed;
    left: 0;
    top 80px;
    width: 260px;
    background-color: silver;
    overflow-y: scroll;
}

为此：

div#fixed-div {
    position: fixed;
    left: 0;
    top 80px;
    width: 260px;
    background-color: silver;
    overflow-y: scroll;
    height: 100%;
}

编辑：

如果您想要一个具有最大浏览器支持的解决方案（即使是较旧的浏览器），则需要JavaScript。下面是一个依赖于jQuery的解决方案：

CSS:

JavaScript:

var bodyHeight = $('body').height();
var headerHeight = $('#header-div').height();
var sidebarHeight = bodyHeight - headerHeight;

$('#fixed-div').height(sidebarHeight);

---

工作JSFIDLE:

请查看在的响应，以获得一个解决方案，该解决方案不需要我重新设置html和正文元素的样式，也不需要使用jQuery技巧，我不知道你能做到。谢谢你指出！顺便说一下，它在较旧的浏览器中不起作用：

var bodyHeight = $('body').height();
var headerHeight = $('#header-div').height();
var sidebarHeight = bodyHeight - headerHeight;

$('#fixed-div').height(sidebarHeight);