在CSS中设置全屏img背景

Question

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

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

.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%更改为min-height: 100%时，图片会突然显示，但页脚现在位于视口的底部，而不是页。这是一张完美解释这一点的图片：

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

如您所见，页脚现在跳起并位于屏幕底部。 如果我将此属性更改回LoginButton，则图片根本无法显示：

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

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

Answer 1

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