css - 在 CSS 中设置全屏图像背景

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% 时，图像突然出现了，但是页脚现在位于视口(viewport)底部，而不是页面底部。这是一张可以完美解释这一点的图片:

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

如您所见，页脚现在跳起来并位于屏幕底部。如果我将此属性改回 min-height: 100%，则图像根本不会显示:

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

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

Answer 1

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