Chrome Körper und HTML-Höhe 100% standardmäßig

Nehmen wir an, Sie wollten Ihren Inhalt 100% der Höhe des Ansichtsfensters aufnehmen. Früher mussten Sie die Höhe der Elemente html und body auf 100% einstellen. Auf diese Weise könnte man auch direkte Nachkommen der body Element Prozent Höhen geben, etwa so:Chrome Körper und HTML-Höhe 100% standardmäßig

<head> 
    <style> 
    html, body { height: 100% } 
    body { margin: 0; } 
    header, footer { height: 10% } 
    main { height: 80% } 
    <style> 
</head> 
<body> 
    <header>Intro</header> 
    <main>The Main Stuff</main> 
    <footer>Additional Details</footer> 
</body>

Die html, body { height: 100% } Erklärung wird nicht mehr einen bestimmten Prozentsatz Höhe in Chrome auf direkte Nachkommen setzen erforderlich. Es ist jedoch immer noch in Firefox erforderlich.

Ist das ein Bug im neuesten Update für Chrome, das Anfang Februar kam? Oder ist die height jetzt standardmäßig auf 100% eingestellt?

Nur um zu klären, ich frage nicht über wie ein prozentuales Layout zu implementieren. Ich frage mehr nach der Implementierung der Standardhöhen der Elemente body und html von Chrome. Dies könnte sehr verwirrend sein für Anfänger Entwickler, die kommen könnte zu denken, dass die html und body brauchen keine Höhe explizit definiert, wenn sie direkte Nachkommen der body prozentualen Höhen haben möchten.

Quelle

2017-02-16 Kevin Behan

Es hängt wirklich vom Browser ab. Ihre sicherste Wette, wenn Sie prozentuale Höhen verwenden müssen, ist die Höhe des Elternteils. Andernfalls wäre eine einfachere Alternative nur "Haupt" {Höhe: 80vh; } 'und' header, footer {height: 10vh; } '. –

In dem Code, den Sie zur Verfügung gestellt haben, nehmen die html und body 100% der Seitenhöhe auf, da es keine doctype Deklaration gibt. Die meisten Browser kehren in den Modus 'Macken' zurück, wenn kein doctype bereitgestellt wird.

Wenn Sie den HTML5 doctype (<!DOCTYPE html>) hinzufügen, sollten Sie feststellen, dass die body- und html-Elemente nicht länger das gesamte Ansichtsfenster ohne explizite Höhe einnehmen.

Quelle

2017-05-23 17:16:54 Sidney

Ich kann nicht sagen, ob es ein Fehler ist oder nicht, sondern um sicherzustellen, dass Ihre Elemente 100% der Ansichtsfenster Höhe einnehmen, sollen Sie wirklich 100vh verwenden:

html, body { 
    height: 100vh; 
}

Prozentual -basierte Höhen sind immer relativ zum direkten Elternteil. Da es kein übergeordnetes Element von gibt, würden Sie erwarten, dass es standardmäßig auf eine Höhe von 0 px eingestellt wird. Einige Browser interpretieren möglicherweise, wie das übergeordnete Element von <body> anders zu behandeln ist, so dass es am sichersten ist, einfach vh Messungen für das <body>-Tag zu verwenden.

Beachten Sie, dass vh Einheiten auf jedes Element verwenden können - nicht nur <html> und <body>!

Hoffe, das hilft!

Quelle

2017-02-16 03:07:45

Wenn Sie prozentuale Viewport-Einheiten verwenden, müssen Sie die Höhe für 'html' und' body' nicht angeben. Sie können es direkt auf Ihre Inhaltselemente anwenden (genau wie Pixelhöhen verwenden). –

Richtig, und zugegebenermaßen war meine Antwort nicht sehr klar. Ich habe gerade die Antwort aktualisiert, um das auch zu erwähnen :) –

Chrome Körper und HTML-Höhe 100% standardmäßig

Antwort

Verwandte Themen