javascript - 固定侧边栏对于浏览器来说太高(底部被切断)

Question

假设我有一个 XXpx 高的固定侧边栏(如果您想直观地了解我的意思，请参阅 http://www.getskeleton.com/)。只要浏览器的高度大于侧边栏，侧边栏看起来就是我想要的样子。但是，当浏览器高度缩小到侧边栏高度以下时，底部内容会被 chop 。

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

Answer 1

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

#sidebar {
    position: absolute; 
}

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

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