0

我们的网站有一个包含粘性页脚的固定侧边栏。当在浏览器高度大于侧边栏内容高度的显示器上查看时，这工作正常，但在较小的显示器上，页脚被“切断”。

为了解决这个问题，我添加了一个媒体查询，它会将页脚更改为相对位于侧边栏内并设置overflow: auto在侧边栏上：

/* sidebar padding + menu height + footer height */
@media screen and (max-height: 580px) {
    .sidebar .footer {
        position: relative;
    }
}

虽然这至少允许在较小的显示器上查看完整的侧边栏内容，但这也意味着我们最终会在侧边栏上看到一个看起来不太好的滚动条。

我想要发生的是，如果浏览器视口小于侧边栏内容的高度，您应该能够使用普通页面滚动条滚动查看所有内容。

我想这可以通过媒体查询来更改position侧边栏的，但我似乎无法弄清楚。

4

2 回答 2

2

现在明白了。在评论之前看过小提琴，但还是不太明白:)

我认为这就是您在媒体查询中寻找的内容：

/* sidebar padding + menu height + footer height */
@media screen and (max-height: 580px) {
    .sidebar .footer {
        position: relative;
    }
    .sidebar{position: static; overflow:visible; float:left;}
}

关键是 .sidebar 上的样式

于 2013-03-20T17:09:46.443 回答
2

我不确定这是否可以通过纯 CSS 实现，因为您所描述的是一个媒体查询，它指定“如果视口低于 580 像素高度，则将侧边栏位置固定到一定的滚动距离，然后静态定位” . 滚动是超出媒体查询范围的属性。

建立在 Brad 的回答之上 - 这是使用 jQuery 的快速方法

jsFiddle 示例

$(document).scroll(function(){    
    if ($(window).height()<=580){
        var sidebarObj=$(".sidebar");
        var extraSidebar=sidebarObj.height()-$(window).height();        
        if ($(document).scrollTop()>extraSidebar){            
            if (sidebarObj.css("position")!="fixed"){
                sidebarObj.css({
                    "position": "fixed",
                    "top": -extraSidebar+"px"
                });
            }
        }
        else{
            sidebarObj.css({
                "position": "static",
                "top": 0+"px"
            });
        }
    }
});
于 2013-03-20T19:08:07.630 回答