CSS：固定位置的侧边栏被切断答案

【问题标题】：CSS: sidebar with fixed position getting cut offCSS：固定位置的侧边栏被切断
【发布时间】：2011-09-11 22:23:11
【问题描述】：

我的网站有一个侧边栏，里面有很多东西——浏览器视口必须有至少 1020 像素的高度才能在不滚动的情况下看到所有内容（当然，除非你缩小） .

我希望固定侧边栏的位置，这样当您在包含大量内容的页面上时，侧边栏在您滚动时保持在同一位置。这很容易实现：

div#Sidebar {
    position: fixed;
}

只要浏览器最大化，这在我的计算机上运行良好，因为我的显示器以 1920 x 1200 运行。但如果我调整浏览器窗口的大小，侧边栏会被切断。当我滚动浏览页面的内容时，我可以看到页面的所有内容，但由于位置固定，侧边栏仍然被截断。所以看来我只有两个选择：

让侧边栏的位置不固定（不好），但让用户能够看到所有的侧边栏（好）。
固定侧边栏的位置（好），但不允许用户看到所有的边栏（坏）。

有没有办法将这两个选项结合起来？

【问题讨论】：

标签： css css-position

【解决方案1】：

试试overflow-y:auto 并限制大小。我建议将其设置为小于 1020 像素，因为很多人都在较小的屏幕上运行（例如，我的 15 英寸笔记本电脑是 1366x768，所以我只能看到大约 3/4）甚至那些在较大的屏幕上不一定会最大化它们的窗口。未经测试，但height:100% 可能/应该工作。

它将为 div 本身添加一个滚动条，因此请务必考虑到这一点，但它会使 div 可滚动，这将解决您的问题。不过，它确实牺牲了一点可用性（主窗口以外的滚动条通常不受欢迎）。

【讨论】：

【解决方案2】：

您可以在 javascript 中进行测试。无论是纯 javascript，还是使用 jQuery（会容易得多）。

这是一个 jQuery 的例子：

$(window).resize(function() {
  if ( $(window).height() < 800) {
    $('#Sidebar').addClass('beAbsolute').removeClass('beFixed');
  } else {
    $('#Sidebar').addClass('beFixed').removeClass('beAbsolute');
  }
});

CSS：

.beFixed {position:fixed;}
.beAbsolute {position:absolute;top:0px;}

默认使用绝对版，让没有JavaScript的用户可以看到整个侧边栏。

【讨论】：

这可能就是我要做的。谢谢！