Question

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

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

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

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

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

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

完整代码：http://jsfiddle.net/benfosterdev/pRBgT/

全屏显示问题的结果：http://fiddle.jshell.net/benfosterdev/pRBgT/show/light/

Answer 1

立即了解。在评论之前看过小提琴，但仍然没有得到它:)

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

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

键是.sidebar上的样式

Answer 2

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

以Brad的答案为基础 - 这是使用jQuery快速完成的方法

jsFiddle example

$(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"
            });
        }
    }
});

防止固定侧边栏内的粘性页脚重叠

2 个答案: