CSSで全画面の背景を設定する

Question

ユーザーがページを入力するときにフルスクリーンイメージを設定したいWebページがあります。私はそれが固定されたり、何かになることを望んでいません。ちょうど窓の大きさで。

ここでは、Webページの下部に完全に配置されたフッターもあります。私はmin-height: 100%を変更したときに画像が全く表示されますが、しません

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

：私はこのように私のフルスクリーン画像を設定しようとすると、今

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; 
} 

：ここにフッターのスタイルですheight: 100%に画像が突然表示されますが、フッターはページではなくビューポートの最下部に表示されます。ここでは完全にこの説明しますイメージである：あなたが見ることができるように

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

は、フッターは今までジャンプし、画面の下部に存在します。 私は戻ってmin-height: 100%にこの属性を変更すると、画像が全く表示されません。

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

が、私はこれをどのように修正することができますか？画像をフルスクリーンにしたいだけでなく、ページの一番下からフッタを飛ばしたくはありません。これらの2つの動作をどのように組み合わせることができますか？

Answer 1

height: 100vh;を使用すると、すべての画面サイズで100％の高さになります。