如果滚动高度至少为某个值，则显示背景图像

Question

我正在使用css-background属性在页面上显示页脚和页眉背景图像。

#bodyContent {
    background-image:url(../images/splash_footer_short.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
}

但是，我的某些页面内容不足，因此页脚图像与页眉图像重叠。我选择不显示页面滚动高度不够高的页脚图像。

我该如何提供一个条件，以便仅当滚动高度足够长时才显示页脚图像？

Answer 1

您应该添加一个min-height属性，该属性等于背景图像的高度。

Answer 2

您可以使用CSS媒体查询来解决此问题：

@media only screen and (max-height:500px) {
   #bodyContent { background-image:none; }
}

上面的代码表示：“当页面小于500px时，隐藏页脚块”

您需要调整您的阈值以适合自己（我猜是500像素，但是您可以根据自己的需要进行更改）。

此外，footer选择器是一个猜测。根据您定义HTML的方式，您可能需要使用类选择器等。

This article更详细地介绍了“垂直响应”网页设计的概念（这是我们在此处讨论的内容）

Answer 3

只使用媒体屏幕 所以：

#footer{display:none}
@media screen and (min-height: X){
 #footer{display:block}
}

Answer 4

这只是通过使用简单的jquery代码

$(document).ready(function (){
$("#footer").hide()
If($(window).height() > x){
$("#footer").show()
}
})

请注意，在上面的代码中，X是使条件成立并显示页脚并为页脚id属性赋予“ footer”（id =“ footer”）值的最小高度。