2

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

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

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

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

http://jsfiddle.net/nA8z4/

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

4

1 回答 1

5

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

于 2013-03-26T21:36:02.047 回答