Einstellung Vollbild img Hintergrund in CSS

Question

Ich habe eine Webseite, die ich Vollbild-Bildschirm rechts einstellen möchte, wenn Benutzer die Seite eingeben. Ich will nicht, dass es repariert wird oder so. Nur in der Größe des Fensters.

Jetzt habe ich auch eine Fußzeile, die absolut am unteren Rand der Webseite positioniert ist. Hier sind die Stile für die Fußzeile:

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

Jetzt, wenn ich versuche, meine Vollbild wie folgt festgelegt:

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

Das Bild überhaupt nicht zeigen, aber wenn ich min-height: 100% ändern zu height: 100%, Das Bild erscheint plötzlich, aber die Fußzeile befindet sich jetzt am unteren Rand des Ansichtsfensters, nicht auf der Seite. Hier ist ein Bild, das diese perfekt erklären:

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

Wie Sie sehen können, jetzt die Fußzeile springt auf und befindet sich am unteren Rand des Bildschirms. Wenn ich dieses Attribut zurück zu min-height: 100% ändern, wird das Bild nicht zeigen überhaupt:

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

Wie kann ich dieses Problem beheben? Ich möchte, dass das Bild im Vollbildmodus angezeigt wird, aber ich möchte auch nicht, dass die Fußzeile vom unteren Rand der Seite springt. Wie kann ich diese 2 Verhaltensweisen kombinieren?

Answer 1

Verwenden Sie height: 100vh; es wird 100% Höhe für alle Bildschirmgrößen abdecken.