在CSS中设置全屏IMG背景

Question

我有一个网页，我想在用户输入页面时正确设置全屏图像。我不希望它被修复或任何东西。就在窗户的大小上。

现在，我还拥有一个完全位于网页底部的页脚。这是页脚的样式：

html {
    height: 100%;
    box-sizing: border-box;
}
body {
    position: relative;
    margin: 0;
    min-height: 100%;
    padding-bottom: 80px;
    color: white;
    background: white;
    font-family: "Quicksand";
    fill: currentColor;
}
/* Footer Section */
footer {
    display: flex;    
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 80px;
    align-items: center;
    justify-content: center;
    background-color: $accent-color;
    color: #fff;
}

现在，当我尝试设置这样的全屏图像时：

.fullscreen-bg {
    height: 100%;
    background-image: url("/assets/images/scorpion.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

该图像根本没有显示，但是当我将min-height: 100%更改为height: 100%时，图像突然显示出来，但是页脚现在位于视口的底部，而不是页面。这是一个可以完美解释的图像：

https://i.gyazo.com/d47e2e1fcdeaf4f8f8f8f8b847c00f43.png

您可以看到，页脚现在跳起来并居住在屏幕的底部。如果我将此属性更改为min-height: 100%，则该图像根本不会显示：

https://i.gyazo.com/B3D8B941222AC16455D220F25DA8BFBF.PNG

我该如何解决？我希望图像是全屏，但我也不希望页脚从页面底部跳起来。如何结合这两种行为？

Answer 1

使用height: 100vh;，它将覆盖所有屏幕尺寸的100％高度。