Frage Verständnisfrage zu html & body height 100%

[mehmet_b_90]

Guten Abend zusammen,

ich habe die letzten Tage mich mit dem Thema Sticky Footer beschäftigt, weil ich in Erfahrung bringen wollte, wie man den Footer ans Ende des Viewports bekommt. Das klappt auch. Was ich aber nicht verstehe ist folgender Codeabschnitt:

html, body {
    height: 100%;
}

main {
    min-height: 100%;
}

Ich weiß, dass sich Prozentangaben auf die Größe des Elternelements beziehen. Aber das html-/body-Element besitzen ja kein Elternelement auf das sie sich beziehen können. Bezieht es sich dann auf das Viewport? Und wie kann in dem Beispiel das main-Element in die Höhe wachsen, wenn die umschließenden Elemente html & body feste 100% haben?

Ich bin einer, ich möchte den Code auch verstehen und nicht nur einfach kopieren und einfügen. Das ist nicht Sinn der Sache für mich beim Programmieren.

Grüße
mehmet_b_90

 

[Aaron3219]

Ich weiß, dass sich Prozentangaben auf die Größe des Elternelements beziehen. Aber das html-/body-Element besitzen ja kein Elternelement, auf das sie sich beziehen können. Bezieht es sich dann auf das Viewport?

Korrekt.

Und wie kann in dem Beispiel das main-Element in die Höhe wachsen, wenn die umschließenden Elemente html & body feste 100 % haben?

Na ja, nur weil du die Größe deines Parent-Elements erbst, heißt es ja nicht, dass du nicht auch über diese Größe hinausgehen kannst. Wenn dein Child-Element 100% groß ist, also genauso groß wie das Parent-Element, dann kann dein Child-Element auch 200 %, also doppelt so groß wie das Parent-Element sein.

Das Parent-Element wird dann nicht einfach größer. Stattdessen werden Scrollbalken hinzugefügt, sodass der innere Container gescrollt wird und somit die Größe des Parent-Elementes gleich bleibt.

Ich hoffe, ich habe dich richtig verstanden. Bei der 2. war ich mir nicht so sicher.

 

[mehmet_b_90]

Danke für deine Erklärung.
Noch eine Frage: Warum müssen das html- und das body-Element 100% haben damit sie erst auf 100% wachsen? Warum reicht da z.B. nicht nur dem html-Element 100% zu geben?

 

[Aaron3219]

Wenn html eine height von 100 % besitzt, warum sollte das auf das body-Element vererbt werden?

Wenn du deinem div eine height von 100 % gibts, dann haben ja die Container in dem div nicht automatisch auch eine height von 100 %.

<div id="div1">
  <div id="div2"></div>
</div>

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

div {
  width: 100%;
  display: block;
}

#div1 {
  height: 100%;
  background-color: lightgrey;
}

#div2 {
  background-color: red;
}

JSFiddle

Wenn es so wäre, wie du beschreibst, dann müsste der Hintergrund eigentlich rot sein.

 

[MrMurphy]

Ich weiß, dass sich Prozentangaben auf die Größe des Elternelements beziehen.

Nein, nur in einigen Fällen.

Ich bin einer, ich möchte den Code auch verstehen und nicht nur einfach kopieren und einfügen.

HTML dient mit ganzem Herzen der Informations- und Inhaltsübermittlung. Ohne Inhalt lassen sich deshalb HTML-Seiten weder verstehen noch erklären. Ähnliches gilt für das CSS.

Worauf sich height-Angaben beziehen können findet sich zum Beispiel auf der Seite

http://www.thestyleworks.de/basics/percentage.shtml

Unten unter "Verwendung" in der mittleren Spalte, wobei zum Verständnis die ganze Seite gelesen werden sollte.

Wenn eine Webseite mit üblichem Inhalt gefüllt ist zeigt sich in der Praxis auch ganz schnell, das Angaben, die eine Seitenhöhe von 100% erzwingen sollen, absolut unsinnig sind.

 

[mehmet_b_90]

Guten Abend,

danke für eure Antworten. Was ich eigentlich meinte ist, warum es z.B. nicht reicht nur body {height: 100%} zu setzen? Denn so wächst body nicht auf das gesamte Viewport. Nur wenn ich html auch height: 100% setze, wächst body erst auf das gesamte Viewport.

Wenn ich das jetzt richtig verstanden habe liegt es also daran, dass die CSS-Eigenschaft body {height: 100%} sich ja auf das Elternelement html bezieht und wenn sie keine Höhenangabe besitzt, kann es nicht funktionieren. Daher muss ich beiden Elementen height: 100% setzen.

PS:
@MrMurphy In dem Link von dir wird folgendes geschrieben:

Bei einer Bildschirmbreite von 1152 Pixel berechnet der Browser die Breite des div-Containers mit 576 Pixel. Dies ist der berechnete Wert, der an den Absatz weitervererbt wird. Der Prozentsatz wird nicht vererbt. Der Absatz ist deshalb ebenfalls 576 Pixel breit, nicht 288 Pixel. (padding, border und margin werden natürlich berücksichtigt.)

Ich habe das mal ausprobiert. Das stimmt allerdings nicht. Der Abastz bekommt bei mir in dem Fall die 288 Pixel und nicht die 576 Pixel. Hat sich das in CSS 3 geändert?