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

时间:2013-03-20 16:11:53

标签: html css media-queries

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

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

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

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

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

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

2 个答案:

答案 0 :(得分: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上的样式

答案 1 :(得分: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"
            });
        }
    }
});