修复方形空间页面上的全屏背景图像

Question

我在使用 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？

Answer 1

要仅解决该特定图像背景的高度，请添加以下内容：

min-height: calc(100vh - 11px);

将其添加到您已有的#collection-5de6d28545f1a7075b7a2741 #canvas{...}规则中，这应该有效。请注意，11px基于您当前对padding-top的值。如果要更改该值，则还需要在min-height规则中对其进行类似的更新。

这样做的意思是，基本上是"如果页面的内容不够高，无法填充浏览器窗口的当前高度，请使用浏览器的最小高度，减去元素上的填充量"。