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

Question

我有一个带有固定位置侧栏的页面。 如果边栏的内容太高而无法容纳在浏览器窗口中，我希望边栏可以滚动。

但是，当我用overflow-y: scroll设置侧边栏样式时，滚动条会显示出来，但由于侧边栏足够高以容纳所有内容，即使它对于浏览器窗口来说过高，滚动条也会被禁用。

有什么方法可以限制固定位置元素的高度，以使其在内容扩展到浏览器窗口底部以下时滚动？

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

http://jsfiddle.net/nA8z4/

http://jsbin.com/iqibew/2 ：此版本显示标题，侧边栏必须出现在标题下方。

Answer 1

您需要设置边栏的高度。 现在，侧边栏与文本块一样高，并在视口下方运行（但看不到）。 如果将其高度设置为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：

* {
  margin: 0;
  padding: 0;
}

html, body {
    height: 100%;
}

div#header-div {
    height: 90px;
    background-color: lime;
}
div#fixed-div {
    position: fixed;
    width: 260px;
    background-color: silver;
    overflow-y: scroll;
}

JavaScript的：

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

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

工作的JSFiddle： http ： //jsfiddle.net/nH7xR/