Question

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

我希望修复侧边栏的位置，以便当您在包含大量内容的页面上时，侧边栏会在您滚动时保持相同的位置。这很容易实现：

div#Sidebar {
    position: fixed;
}

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

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

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

Answer 1

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

它会为div本身添加一个滚动条，所以一定要考虑到它，但它会使div可滚动，这将解决你的问题。它确实牺牲了一点可用性（除了主窗口之外的滚动条通常不赞成）。

Answer 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的用户可以看到整个侧边栏。

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

2 个答案: