我们的网站有一个固定的侧边栏,其中包含粘性页脚。在浏览器高度大于侧边栏内容高度的显示器上查看时,此工作正常,但在较小的显示器上,页脚被“切断”。
为了解决这个问题,我添加了一个媒体查询,它可以将页脚更改为相对定位在侧边栏内并在侧边栏上设置overflow: auto
:
/* sidebar padding + menu height + footer height */
@media screen and (max-height: 580px) {
.sidebar .footer {
position: relative;
}
}
虽然这至少允许在较小的显示器上查看完整的侧边栏内容,但这也意味着我们最终会在侧边栏上看到一个滚动条,这看起来不太好。
我希望发生的是,如果浏览器视口小于侧边栏内容的高度,您应该可以使用普通页面滚动条滚动来查看所有内容。
我想这可以通过媒体查询来更改侧边栏的position
,但我似乎无法弄明白。
答案 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快速完成的方法
$(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"
});
}
}
});