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

Question

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

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

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

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

http://jsfiddle.net/nA8z4/

http://jsbin.com/iqibew/2 : 这个版本显示了一个标题，侧边栏必须出现在下面。

Answer 1

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