Wie passe ich die Webseite genau an die Bildschirmgröße ohne Scrollen?

Question

Ich bin neu in CSS und ich finde einige Schwierigkeiten bei der Einstellung meiner Webseite genau auf die Bildschirmgröße passen, aber es passt nicht und eine Bildlaufleiste auftritt. Ich habe alle genannten Möglichkeiten ausprobiert here Aber keiner von ihnen funktioniert. Meine Webseite sieht mehr oder weniger wie this aus. Wenn ich

verwendet

html{ 
height: 100vh; 
} 

body{ 
    width: 100%; 
    height: 100vh; 
    background-color: #ffffff; 
    font-family: gothambook; 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    } 

Die Bildlaufleiste nicht auftreten, aber der Inhalt unter dem Bildschirm ging und war nicht sichtbar

Answer 1

Wenn Sie die Scroll vollständig deaktivieren, dann können Sie Ihre Designs mit nur diesem

ersetzen

html { 
    overflow: hidden; 
} 

Answer 2

Sie sind fast da. Targetiere sowohl html als auch body und setze beide ihre width und height auf 100%.

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
body { 
 
    background: red; 
 
}

Answer 3

html {} 
body { 
    height: 95vh; 
} 

vh steht für View Höhe und so 97vh 97% ist der Ansicht/Browser Höhe.

https://css-tricks.com/fun-viewport-units/

Aus irgendeinem Grund 100vh es ein wenig macht blättern.