修正了浏览器侧边栏太高的问题(底部被切掉)

Question

假设我有一个XXpx高的固定侧边栏（请参阅http://www.getskeleton.com/如果你想了解我的意思）。只要浏览器的高度比侧边栏大，侧边栏看起来就和我想要的一模一样。然而，当浏览器的高度缩小到侧边栏的高度以下时，底部内容就会被截断

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

Answer 1

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

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

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

Answer 2

这样做：

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

Answer 3

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