固定侧边栏对于浏览器来说太高（底部被切断）答案

【问题标题】：Fixed sidebar too tall for browser (bottom is getting cut off)固定侧边栏对于浏览器来说太高（底部被切断）
【发布时间】：2012-03-08 08:08:47
【问题描述】：

假设我有一个 XXpx 高的固定侧边栏（如果您想了解我的意思，请参阅 http://www.getskeleton.com/）。只要浏览器的高度大于侧边栏，侧边栏看起来正是我想要的方式。但是，当浏览器的高度缩小到低于侧边栏的高度时，底部的内容就会被截断。

最初，侧边栏有position: fixed，但如果浏览器太小而无法容纳整个侧边栏，我想将其更改为position: aboslute。本质上，我想在页面加载和任何时候用户调整大小完成调整页面大小时都这样做，它会检查以确保底部内容没有被截断，然后分配适当的position 属性。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您可以为此使用垂直媒体查询，就像这样（假设侧边栏高 700 像素。）

#sidebar {
    position: absolute; 
}

media screen and (min-height:700px) {
    #sidebar { position: fixed; }
}

通过首先声明绝对位置，您可以确保不支持媒体查询的浏览器将获得绝对定位的侧边栏，该侧边栏仍然可以使用。

【讨论】：

非常干净的解决方案，但这不适用于旧版浏览器。
谢谢，不过我想我正在寻找兼容 IE7+ 的东西。

【解决方案2】：

做这样的事情：

var $sidebar = $('#idOfSidebar')
    ,$w = $(window);
$w.resize(function () { 
  var pos = $w.height() < $sidebar.height()? 'absolute': 'fixed'; 
  $sidebar.css({position: pos});
});

【讨论】：

我从未使用过.resize 函数...我是否需要担心性能问题，因为此函数可能会在调整大小时被多次调用？
是的，您应该担心。这就是为什么我将所有“昂贵”的语句从函数本身中取出，只使用其中的缓存语句。
有什么办法可以进一步优化这个语句吗？对于初学者来说，缓存侧边栏的高度似乎很简单
是的。那会更好。不过我认为这已经足够快了。

【解决方案3】：

一个选项是将overflow: auto 用于可能高于浏览器客户端高度的固定块。这可以用作默认的纯 CSS 解决方案，可以与 JavaScript 方法结合使用。

【讨论】：

那不会在侧边栏添加一个单独的滚动条吗？
会的。它通常比几个侧边栏元素的不可访问性要好。您可以在此之外另外使用 JavaScript，而不是代替。
我肯定会将此添加到我的代码中。谢谢你的建议。