Ich möchte body haben 100% der Browserhöhe. Kann ich das mit CSS erreichen?
Ich habe versucht, die height: 100% aber es funktioniert nicht.
Ich möchte eine Hintergrundfarbe für eine Seite festlegen, die das gesamte Browserfenster ausfüllt, aber wenn die Seite wenig Inhalt hat, erhalte ich einen hässlichen weißen Balken am unteren Rand.
Für die wahren Puristen: Diese Methode respektiert die Standardränder des Browsers und verhindert das unerwünschte Scrollen, das durch die anderen Methoden erzeugt wird, und wächst zudem, wenn der Inhalt wächst. Getestet in Chrome, Safari und Firefox. Die Hintergründe sind nur zur Show...
html {
display: flex;
flex-direction: column;
height: 100%;
background: red;
}
body {
flex:1;
background: green;
}
Ich würde dies verwenden
html, body{
background: #E73;
min-height: 100%;
min-height: 100vh;
overflow: auto; // <- this is needed when you resize the screen
}
<html>
<body>
</body>
</html>Der Browser verwendet min-height: 100vh und wenn der Browser ein wenig älter ist, wird die min-height: 100% ist der Fallback.
El overflow: auto ist notwendig, wenn Sie möchten, dass der Textkörper und die Html-Datei ihre Höhe vergrößern, wenn Sie die Bildschirmgröße ändern (z. B. auf eine mobile Größe)
Bitte überprüfen Sie dies:
* {margin: 0; padding: 0;}
html, body { width: 100%; height: 100%;}Oder versuchen Sie eine neue Methode Viewport height :
html, body { width: 100vw; height: 100vh;}Ansichtsfenster: Wenn Sie Viewport verwenden, bedeutet das, dass der Inhalt des Bildschirms in voller Höhe auf dem Bildschirm angezeigt wird.
Bitte fügen Sie eine Erklärung Ihrer Lösung bei, damit andere, die diese Antwort finden, sie verstehen können. Danke!
Könnten Sie bitte erklären, was der mögliche Zweck von width: 100% für die Elemente body und html?
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
5 Stimmen
CSS3 Viewport-Prozentsatz-Längen