我在使用Squarespace页面获取背景图像以全屏显示(占据整个背景空间)时遇到了问题。我的CSS可以正常工作,但是以某种方式停止了工作,现在屏幕底部出现了空白。我在Squarespace中遇到的问题以及它如何为您设置HTML,因此重新创建此问题确实没有帮助。相反,您可以在richiequake.com上查看页面,并使用密码Help123进行访问。此页面的桌面版和移动版中会发生此问题。这是我的台式机CSS:
#collection-5de6d28545f1a7075b7a2741 #canvas{
max-width: 100% !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 11px !important;
background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
对于移动设备,我一直在尝试:
@media only screen and (max-width: 400px) {
#collection-5de6d28545f1a7075b7a2741 .canvas{
max-width: 100% !important;
max-height: 100% !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 11px !important;
background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
我认为我的问题是一个HTML元素占用了屏幕底部的空间,但是我找不到此元素,也没有找到一种方法来使背景图像占据整个空间。我需要在CSS代码中解决此问题吗?我在错误的HTML元素上使用CSS吗?
答案 0 :(得分:0)
要仅解决特定图像背景的高度,请添加以下内容:
min-height: calc(100vh - 11px);
将其添加到您已经拥有的#collection-5de6d28545f1a7075b7a2741 #canvas{...}
规则中,并且应该可以使用。请注意,11px
基于您当前为padding-top
拥有的值。如果您要更改该值,则也想在min-height
规则内进行类似的更新。
这是在说什么,基本上是“如果页面的内容不足以填充浏览器窗口的当前高度,请使用最小高度(无论浏览器有多高)减去顶部填充量在元素上”。