Höhe: 100% oder Mindesthöhe: 100% für HTML und Körperelemente?

Question 1

Beim Entwerfen von Layouts setze ich die html, bodyElemente heightauf, 100%aber in einigen Fällen schlägt dies fehl. Was sollte also verwendet werden?

html, body {
   height: 100%;
}

oder

html, body {
   min-height: 100%;
}

Nun, dies ist nicht meinungsbasiert, da jede Methode ihre eigenen Mängel aufweist. Was ist also der empfohlene Weg und warum?

Question 2

Wenn Sie versuchen , Hintergrundbilder bewerben htmlund bodydass füllen Sie das gesamte Browser - Fenster, keines von beiden. Verwenden Sie stattdessen Folgendes:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

Meine Argumentation wird hier gegeben (wo ich ganzheitlich erkläre, wie man Hintergründe auf diese Weise anwendet):

Übrigens der Grund, warum Sie angeben müssen heightund min-heightzu htmlund bodyjeweils ist , weil weder Element jede innere Höhe aufweist. Beide sind height: autostandardmäßig. Es ist das Ansichtsfenster mit einer Höhe von 100%. Es wird also height: 100%aus dem Ansichtsfenster entnommen und dann bodymindestens angewendet , um das Scrollen von Inhalten zu ermöglichen.

Die erste Möglichkeit, height: 100%beide zu verwenden, verhindert, dass bodysich der Inhalt erweitert, sobald er über die Höhe des Ansichtsfensters hinaus wächst. Technisch dies nicht verhindern , dass der Inhalt von Scrollen, aber es verursacht bodyeine Lücke unterhalb der Falte zu verlassen, die in der Regel unerwünscht ist.

Die zweite Möglichkeit, bei min-height: 100%beiden zu verwenden, führt nicht dazu body, dass die volle Höhe von erreicht wird, htmlda min-heightein Prozentsatz nur dann funktioniert, bodywenn htmlein expliziter Wert vorhanden ist height.

Der Vollständigkeit halber enthält Abschnitt 10 von CSS2.1 alle Details, aber es ist eine äußerst komplizierte Lektüre, sodass Sie sie überspringen können, wenn Sie an nichts interessiert sind, was über das hinausgeht, was ich hier erklärt habe.

Question 3

Sie können die Ansichtshöhe height ( vh) verwenden:

body {
    min-height: 100vh;
}

Es ist relativ zum Bildschirm, nicht zur übergeordneten Höhe, sodass Sie keine HTML-Höhe benötigen: 100%.

Answer 1

Beim Entwerfen von Layouts setze ich die html, bodyElemente heightauf, 100%aber in einigen Fällen schlägt dies fehl. Was sollte also verwendet werden?

html, body {
   height: 100%;
}

oder

html, body {
   min-height: 100%;
}

Nun, dies ist nicht meinungsbasiert, da jede Methode ihre eigenen Mängel aufweist. Was ist also der empfohlene Weg und warum?

Answer 2

Wenn Sie versuchen , Hintergrundbilder bewerben htmlund bodydass füllen Sie das gesamte Browser - Fenster, keines von beiden. Verwenden Sie stattdessen Folgendes:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

Meine Argumentation wird hier gegeben (wo ich ganzheitlich erkläre, wie man Hintergründe auf diese Weise anwendet):

Übrigens der Grund, warum Sie angeben müssen heightund min-heightzu htmlund bodyjeweils ist , weil weder Element jede innere Höhe aufweist. Beide sind height: autostandardmäßig. Es ist das Ansichtsfenster mit einer Höhe von 100%. Es wird also height: 100%aus dem Ansichtsfenster entnommen und dann bodymindestens angewendet , um das Scrollen von Inhalten zu ermöglichen.

Die erste Möglichkeit, height: 100%beide zu verwenden, verhindert, dass bodysich der Inhalt erweitert, sobald er über die Höhe des Ansichtsfensters hinaus wächst. Technisch dies nicht verhindern , dass der Inhalt von Scrollen, aber es verursacht bodyeine Lücke unterhalb der Falte zu verlassen, die in der Regel unerwünscht ist.

Die zweite Möglichkeit, bei min-height: 100%beiden zu verwenden, führt nicht dazu body, dass die volle Höhe von erreicht wird, htmlda min-heightein Prozentsatz nur dann funktioniert, bodywenn htmlein expliziter Wert vorhanden ist height.

Der Vollständigkeit halber enthält Abschnitt 10 von CSS2.1 alle Details, aber es ist eine äußerst komplizierte Lektüre, sodass Sie sie überspringen können, wenn Sie an nichts interessiert sind, was über das hinausgeht, was ich hier erklärt habe.

Answer 3

4

Dies ist, was mir am besten gefallen hat :) height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of contenteinfache peasy Lösung ... danke //

Mr. Alien

Answer 4

Ich frage mich jedoch, wie die Bildlaufleisten dann magisch erscheinen. Das htmlElement ist overflow:visiblestandardmäßig aktiviert, daher gehe ich davon aus, dass die Bildlaufleisten aufgrund des Browserverhaltens angezeigt werden, damit der gesamte normale Fluss des Dokuments angezeigt werden kann.

Fabrício Matté

Answer 5

@ Fabrício Matté: Es wird in overflow: autodas Ansichtsfenster übersetzt, aus dem die Bildlaufleisten stammen. Dies wird

BoltClock

Answer 6

10

@BoltClock Irgendeine Idee, wie man das Kind 100% des Körpers hierher bringt ? Dies funktioniert jedoch

Mr. Alien

Answer 7

1

Box-Größe: Border-Box hat keinen Einfluss auf die Ränder. Polsterung, ja, aber das hängt von den persönlichen Vorlieben ab.

BoltClock

Answer 8

17

Sie können die Ansichtshöhe height ( vh) verwenden:

body {
    min-height: 100vh;
}

Es ist relativ zum Bildschirm, nicht zur übergeordneten Höhe, sodass Sie keine HTML-Höhe benötigen: 100%.

Damjan Pavlica
quelle

Welche zusätzlichen Vorteile bietet dies jedoch?

Xji

Keine zusätzlichen Vorteile, nur eine andere Möglichkeit, das Problem zu lösen.

Damjan Pavlica

Vorsicht, wie Mobile dies versteht

GWorking

Beachten

dBlaze

Answer 9