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方法一起使用。

固定侧边栏对于浏览器而言太高了（底部被切断）

3 个答案: