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

我们的网站有一个固定的边栏，其中包含一个粘性的页脚。当在浏览器高度大于侧边栏内容高度的显示器上查看时，这种方法效果良好，但在较小的显示器上，页脚被“切断”

为了解决这个问题，我添加了一个媒体查询，它会将页脚更改为在侧栏中相对定位，并在侧栏上设置

overflow:auto

：

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

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

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

我想通过媒体查询来更改侧边栏的

位置是可能的，但我似乎无法理解


篡改完整代码：
演示问题的全屏结果：
现在就明白了。在评论之前看过小提琴，但还是不太明白：）

我想这就是你在媒体查询中所寻找的：

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

键是侧边栏上的样式，请立即理解。在评论之前看过小提琴，但还是不太明白：）

我想这就是你在媒体查询中所寻找的：

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

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

基于Brad的答案——这里有一个使用jQuery的快速方法


$（文档）。滚动（函数（）{
if（$（窗口）.height（）外部边栏）{
if（sidebarObj.css（“位置”）！=“固定”）{
sidebarObj.css({
“位置”：“固定”，
“顶部”：-extraSidebar+“px”
});
}
}
否则{
sidebarObj.css({
“位置”：“静态”，
“顶部”：0+“像素”
});
}
}
});
我不确定纯CSS是否可以实现这一点，因为您描述的是一个媒体查询，它指定“如果视口的高度低于580px，请将侧边栏位置固定到某个滚动距离，然后静态定位”。滚动是一种超出媒体查询范围的属性

基于Brad的答案——这里有一个使用jQuery的快速方法


$（文档）。滚动（函数（）{
if（$（窗口）.height（）外部边栏）{
if（sidebarObj.css（“位置”）！=“固定”）{
sidebarObj.css({
“位置”：“固定”，
“顶部”：-extraSidebar+“px”
});
}
}
否则{
sidebarObj.css({
“位置”：“静态”，
“顶部”：0+“像素”
});
}
}
});
有点困惑。你是说你不喜欢侧边栏上的滚动条，但是你说你想要普通的滚动条？你能稍微澄清一下目标吗？我所说的“正常”滚动条是指标准页面滚动条。如果你看小提琴，就容易理解了。有点困惑。你是说你不喜欢侧边栏上的滚动条，但是你说你想要普通的滚动条？你能稍微澄清一下目标吗？我所说的“正常”滚动条是指标准页面滚动条。如果你看小提琴，它会更容易理解。同样，这会一直持续到你向下滚动页面——此时侧边栏需要再次固定到视口的底部。我开始想，如果不使用JavaScript，这是不可能的。@BenFoster在您理想的解决方案中-当视口高度太小时，用户向下滚动，直到到达页脚，然后页脚停止滚动，页面继续滚动？这意味着用户只看到侧边栏底部的页面的其余部分？是的…问题不是非常清楚：）因此，为了澄清，当视口变得足够小，足以切断页脚时，您希望页面滚动直到侧边栏页脚处于全视图中，然后使侧边栏保持固定，直到到达页面底部，让菜单顶部保持关闭状态？这同样有效，直到您向下滚动页面-此时，侧边栏需要再次固定到视口底部。我开始想，如果不使用JavaScript，这是不可能的。@BenFoster在您理想的解决方案中-当视口高度太小时，用户向下滚动，直到到达页脚，然后页脚停止滚动，页面继续滚动？这意味着用户只看到侧边栏底部的页面的其余部分？是的…问题不是非常清楚：）因此，为了澄清，当视口变得足够小，足以切断页脚时，您希望页面滚动直到侧边栏页脚处于全视图中，然后使侧边栏保持固定，直到到达页面底部，关闭菜单顶部？有没有办法用纯CSS实现？有没有办法用纯CSS实现？