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

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

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

大厦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" 
      }); 
     } 
    } 
}); 

Answer 2

现在明白了。曾考虑过的意见之前，小提琴，但仍然没有完全得到它:)

我认为这是你在找什么在你的媒体查询：

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

关键是风格上。边栏