修复Squarespace页面上的全屏背景图像

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规则内同样进行更新。

这样做的意思是，基本上，“如果页面的内容不够高不能填充浏览器窗口的当前高度，请使用最小高度（无论浏览器有多高，减去顶部的填充量元素”。