图像封面全屏留下底部的白色空间

Question

我希望我的图像完全覆盖背景。此外，如果除了背景之外的任何方向都没有内容，我不想要滚动条。

以下是我能得到的最好的效果，除了我在底部有大约1英寸的空白区域，水平滚动到大约95％。

SCSS

body, html {
  padding: 0 !important;
  margin: 0 !important;
}

.workspace {
  background: url("../../../assets/Images/WhatIsHunter.jpg") no-repeat center center fixed;
  background-size: cover;
  height: 100%;
}

Answer 1

在CSS中，height属性的百分比单位是相对于父级的高度。因此，基于100%在DOM中的位置，.workspace可能意味着不同的东西。

要覆盖整个视口，请使用vh单位。

.workspace {
  height: 100vh;
}

来自MDN article on units（强调我的）：

  

vw，vh：分别是视口宽度的1/100，视口高度的1/100 。

因此，其中一百个将构成视口的整个高度，这正是您所需要的。

Answer 2

这可能是因为身体不一定需要覆盖整个网页，因此请尝试以下代码：

  body{
       height:100%;
       background-size:cover;
      }
   html{
       height:100%;
       }