height, min-height

[Jens]

Moin,
was bewirkt folgendes

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

Ist da nicht eines zuviel?
Worin besteht der Unterschied?

height heißt doch "feste Höhe"
Kann bei min-height der body größer als 100% werden?

[Rolf B]

Hallo Jens,

height:100; wäre ein Error. Längenangaben ohne Einheiten sind in CSS nur für die Länge 0 zulässig. Ich nehme an, du hast Dich vertippt und meinst: height: 100%;

min-height:100% soll am Body besagen, dass der Body nicht kleiner ist als der Viewport. Nach meiner Erfahrung braucht man dafür aber auch html { min-height:100%; }. Besser ist body { min-height: 100vh; }. Das ist relativ zur Viewportgröße, nicht zum Elternelement, das versteht sogar der jüngste IE und ist damit gut genug für die Welt.

Gibt man height und min-height beide an, berechnet der Browser übrigens beide und wählt den größeren der beiden Werte.

Die unsinnig erscheinende Kombination von height:100%; min-height:100%; dürfte ein Fallback für Internet Explorer vor Version 7 sein, weil der min-height noch nicht kannte, und height wie min-height behandelt hat. IE6 und seine noch quirksigeren Vorgänger sind aber toter als alle Dodos dieser Welt.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Besser ist body { min-height: 100vh; }.

Wobei man berücksichtigen muss, dass body per Browserdefault margin hat, den man dan nullen möchte und Abstand zum Rand anderweitig machen muss, z.B. mit padding.

Sonst gibt’s auch bei wenig Seiteninhalt eine dann sinnlose Scrollbar.

😷 LLAP

[Rolf B]

Hallo Gunnar,

was ich tatsächlich schon in meiner Antwort stehen hatte, aber wieder gestrichen habe. Bei min-height ist das nicht relevant. Dachte ich. Aber Du hast recht, wenn die Inhaltshöhe nicht 100% erreicht, möchte man keinen Scrollbar sehen.

Also entweder

body {
   margin: 0;
   padding: 8px;
   box-sizing: border-box;
   min-height: 100vh;
}

oder, wenn man legitimerweise auf IE<9 pfeift:

body {
   margin: 8px;   /* oft Browser-Default, aber sicher ist sicher */
   min-height: calc(100vh - 16px);
}

Jens, die Spaces um das Minuszeichen sind syntaxrelevant.

Rolf

[Gunnar Bittersmann]

@@Rolf B

body {
   margin: 0;
   padding: 8px;
   box-sizing: border-box;
   min-height: 100vh;
}

Wobei man box-sizing sinnvollerweise für alle Elemente auf border-box setzt. Die Eigenschaft wird ja nicht vererbt. [MDN]

Und für generierte Pseudoelemente gleich mit:

*, ::before, ::after { box-sizing: border-box }

☞ Beispiel

---

oder, wenn man legitimerweise auf IE<9 pfeift:

body {
   margin: 8px;   /* oft Browser-Default, aber sicher ist sicher */
   min-height: calc(100vh - 16px);
}

?? Warum da mit calc() hantieren? Die erste Variante war wohl die bessere – so gut, dass es keines Oders bedurft hätte.

Außerdem weist die zweite die fatale Unschönheit auf, dass zwei Werte voneinander abhängig sind. Wenn man einen ändert, muss man den anderen auch ändern, was aber leicht vergessen werden kann.

Wenn, dann müsste man das so machen:

body {
  --body-margin: 0.5em;
  margin: var(--body-margin);
  min-height: calc(100vh - 2 * var(--body-margin));
}

Die Ersetzung von 8px durch 0.5em hab ich gleich mal mitgemacht.

😷 LLAP

[Jens]

Hi,
besten Dank, in der Tat hatte ich mich verschrieben.
Nachdem ich mich gerade mit den Grundlagen befasse ist mir noch folgendes aufgefallen

html, body {
height: 100%;
}

Was bewirkt die Angabe für html?
html enthält doch nur head und body, und head ist doch nicht sichtbar auf der Webseite.

[Rolf B]

Hallo Jens,

das Problem ist, dass height:100% am body sich auf die Höhe des Elternelements bezieht, und das ist nun mal das html Element.

Das html Element dagegen ist das ganze Dokument (glaube ich) und wenn man dort height:100% sagt, bezieht es sich auf den Viewport.

Aber wie gesagt, die Angabe 100% ist ungeschickt und stammt aus den Urzeiten des Web, wo es die Einheit vh noch nicht gab. 100vh = 100% der Viewporthöhe. Der Viewport ist der Bereich des Bildschirms, in dem dein Dokument anzeigt wird. Also das Fenster, oder bei Vollbild-Display der ganze Bildschirm (minus einer eventuellen Touch-Tastatur).

Schau, was ich um 14:16 geschrieben habe. Das funktioniert auch mit height, wenn Du Vollbildanzeige ohne Scrollbar haben willst. Das ist allerdings nicht völlig trivial, ein Vollbild-Layout muss gut überlegt sein und ist auch nicht auf jedem Gerät sinnvoll.

Rolf

[Jens]

Hallo Rolf,

Das html Element dagegen ist das ganze Dokument (glaube ich) und wenn man dort height:100% sagt, bezieht es sich auf den Viewport.

Aus Deinem Beispiel von 14:16 schließe ich, dass keine Größenangabe bei html notwendig ist.

Allerdings bin ich jetzt völlig durcheinander, wenn da jetzt noch before. after und box-sizing genannt wird.

Gibt es im Wiki ein Muster, wo all dies berücksichtigt ist?

[Gunnar Bittersmann]

@@Jens

Allerdings bin ich jetzt völlig durcheinander, wenn da jetzt noch before. after und box-sizing genannt wird.

Mit box-sizing ist es möglich, ein Box-Modell zu wählen:

• content-box (default): CSS-Standard, wenig intuitiv. width gibt nicht die Gesamtbreite an, die das Element einnimmt, sondern die Breite von seinem Inhalt – ohne padding-left/right und border-left/right-width.

• border-box: vom IE ursprünglich entgegen dem Standard implementiert, dann Quirks-Modus. Intuitiver als das Standard-Modell, denn width ist die tatsächlich vom Element beanspruchte Breite inklusive padding-left/right und border-left/right-width.

Man tut wohl gut daran, bei neuen Projekten von Anfang an das Box-Modell mit border-box für alle Elemente zu wählen.

Gibt es im Wiki ein Muster, wo all dies berücksichtigt ist?

Es gibt einen Eintrag zum Box-Modell, den ich aber nicht für anfängertauglich halte. Auch der MDN-Artikel Introduction to the CSS box model taugt als Einstieg nicht wirklich.

Aber jetzt hast du ja den Suchbegriff.

😷 LLAP

[Rolf B]

Hallo Gunnar,

Es gibt einen Eintrag zum Box-Modell, den ich aber nicht für anfängertauglich halte.

Ja, ich war auch schon dabei eine Antwort zu schreiben, habe es dann aber wegen der nötigen Zusatzinformationen zum Wiki erstmal zurückgestellt.

Hast Du eine Idee, wie man den Artikel verbessern könnte? Und wenn es nur Stichworte sind, beim Ausformulieren kann man ja helfen, bei der Mediawiki-Syntax auch 😉

Rolf

[Jens]

Hallo,

Gibt es im Wiki ein Muster, wo all dies berücksichtigt ist?

[Gast]

Hallo,

Gibt es im Wiki ein Muster, wo all dies berücksichtigt ist?

Das würde mich auch interessieren!

[Matthias Scharwies]

Servus!

Hallo,

Gibt es im Wiki ein Muster, wo all dies berücksichtigt ist?

Das würde mich auch interessieren!

Hier gibt's eine schrittweise Erklärung: CSS/Tutorials/Einstieg/Box-Modell

und weiter unten dann ein „Muster“: Lösung_2:_Das_alternative_Boxmodell

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Jens, hallo Gast,

Muster, wo all dies berücksichtigt ist?

da keiner geantwortet hat, könntet ihr schließen, dass die Antwort "nein" ist. Das ist auch nicht unbedingt möglich. Je nach gewünschtem Seitenlayout braucht man bestimmte Dinge und andere nicht. Ein CSS Muster für alles - das dürfte nicht funktionieren bzw. es wäre so riesig, dass man nichts mehr begreift.

Eine generelle Empfehlung, box-sizing:border-box zu nutzen, möchte ich auch eigentlich nicht aussprechen. Gunnar hat das getan, aber auch mit einer Prise Salz dabei: "Man tut wohl gut daran,..." - das ist in meinen Augen eine Empfehlung zweiter Klasse.

Mein Gedanke dazu ist: Man tut wohl gut daran, zu wissen, was man eigentlich haben will. Und wenn man noch nicht zu viel Erfahrung hat: Ja, border-box macht die Sache machmal einfacher. Aber man muss auch wissen, welche Konsequenzen das hat. Rührt man sich Beispiele aus verschiedenen Quellen zu einem Codebrei zusammen, könnten die Zutaten nicht zusammen passen, weil längst nicht jeder das border-box Modell voraussetzt.

Die Story mit ::after und ::before ist nervig. Wenn man diese Pseudoelemente nicht benutzt, braucht man dafür auch keine CSS Regeln. Aber wenn man sie nutzt, muss man wissen, dass der * Selektor sie nicht matcht. Weil sie nicht real sind - „pseudo“ eben.

Rolf

[Gast]

Hallo Rolf,

Muster, wo all dies berücksichtigt ist?

da keiner geantwortet hat, könntet ihr schließen, dass die Antwort "nein" ist. Das ist auch nicht unbedingt möglich. Je nach gewünschtem Seitenlayout braucht man bestimmte Dinge und andere nicht. Ein CSS Muster für alles - das dürfte nicht funktionieren bzw. es wäre so riesig, dass man nichts mehr begreift.

Mir gings eigentlich nur um die unbedingt nötige Angaben zum body, gar nicht um ein box-Modell. Und aus den einzelnen Beiträgen in diesem thread kann ich nicht erkennen, wofür das eine, wozu das andere gut sein soll.

[Rolf B]

Hallo Gast,

deswegen verlinken wir ja alle auf das Wiki und andere Quellen.

Und Gunnar schrub hier die Motivation, warum es zwei Modelle gibt: Es sind historisch gewachsene Veteranen der Browserkriege.

Und statt sich auf ein Modell festzulegen, haben die Gremien die "dann eben beides" Lösung geschaffen und wir können uns aussuchen, welche Qual wir uns wählen möchten.

Rolf

[Gast]

Hallo Rolf, wie Gunnar schreibt:

Es gibt einen Eintrag zum Box-Modell, den ich aber nicht für anfängertauglich halte. Auch der MDN-Artikel Introduction to the CSS box model taugt als Einstieg nicht wirklich.

Aber jetzt hast du ja den Suchbegriff.

Wenn er schon keine anfängertaugliche Artikel kennt, dann kann ich vermutlich lange suchen. Aber vielleicht habe ich ja Glück.

[Gunnar Bittersmann]

@@Gast

Wenn er schon keine anfängertaugliche Artikel kennt

… dann muss das gar nichts heißen. Ich bin ja selten auf der Suche nach solchen. 😏

😷 LLAP

[Gast]

@@Gast

Wenn er schon keine anfängertaugliche Artikel kennt

… dann muss das gar nichts heißen. Ich bin ja selten auf der Suche nach solchen. 😏

😷 LLAP

Ich hoffe, dass ich in zehn Jahren auch so schreiben kann.😏

Ich werde mit Deinem Vorschlag

body {
   margin: 0;
   padding: 8px;
   box-sizing: border-box;
   min-height: 100vh;
}
*, ::before, ::after { box-sizing: border-box }

weitermachen, auch wenn mir die :: noch nichts sagen. Natürlich könnte ich das nachschauen, aber ich betrachte es zunächst einfach als sinnvolle "black box".

Vielen Dank an alle!

[Gunnar Bittersmann]

@@Gast

Ich werde mit Deinem Vorschlag

body {
   margin: 0;
   padding: 8px;

Das habe ich nicht vorgeschlagen. Wenn irgendwo im Stylesheet px auftaucht, sehe ich das i.d.R. als Fehler an. Es ist vermutlich nicht die schlechteste Idee, den Randabstand von der Schriftgröße abhängig zu machen, also in em oder rem anzugeben.

   box-sizing: border-box;
   min-height: 100vh;
}
*, ::before, ::after { box-sizing: border-box }

Wenn du box-sizing: border-box für * angibst, solltest du das nicht für body nochmal tun. Mein Vorschlag sähe also so aus:

body {
   margin: 0;
   padding: 0.5em;
   min-height: 100vh;
}

*, ::before, ::after { box-sizing: border-box }

Wobei noch die Reihenfolge der Regeln zu überlegen wäre: vom Speziellen zum Allgemeinen oder andersrum. Wobei zweites wohl sinnvoller ist, da bei gleicher Spezifität die letzte Regel gewinnt. Also:

*, ::before, ::after { box-sizing: border-box }

body {
   margin: 0;
   padding: 0.5em;
   min-height: 100vh;
}

auch wenn mir die :: noch nichts sagen.

: bei Pseudoklassen (:hover, :focus, :invalid, :first-child, …);
:: bei Pseudoelementen (::before, ::first-letter, ::marker, …).

😷 LLAP

[Matthias Scharwies]

Servus!

Hallo Rolf,

Muster, wo all dies berücksichtigt ist?

da keiner geantwortet hat, könntet ihr schließen, dass die Antwort "nein" ist. Das ist auch nicht unbedingt möglich. Je nach gewünschtem Seitenlayout braucht man bestimmte Dinge und andere nicht. Ein CSS Muster für alles - das dürfte nicht funktionieren bzw. es wäre so riesig, dass man nichts mehr begreift.

Mir gings eigentlich nur um die unbedingt nötige Angaben zum body, gar nicht um ein box-Modell.

Nötig ist gar keine. Man hat eben nur das Problem bei festen Breitenangaben, dass die Werte nicht den erwarteten entsprechen.

Hier gibt's eine schrittweise Erklärung: CSS/Tutorials/Einstieg/Box-Modell

Dann könntest du evtl. mit box-sizing ein anderes Box-modell einstellen:

*, ::before, ::after { 
  box-sizing: border-box; 
}

Das ist aber nicht zwingend erfpderlich.

Und aus den einzelnen Beiträgen in diesem thread kann ich nicht erkennen, wofür das eine, wozu das andere gut sein soll.

Das ist das Problem des Forums: too much information. ... oft noch ohne Erklärung.

@Rolf B schrieb:

deswegen verlinken wir ja alle auf das Wiki und andere Quellen.

Genau!

Hier gibt's eine schrittweise Erklärung: CSS/Tutorials/Einstieg/Box-Modell

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Rolf B

Eine generelle Empfehlung, box-sizing:border-box zu nutzen, möchte ich auch eigentlich nicht aussprechen.

Ich schon. Es ist die Korrektur von etwas, was in CSS hätte anders spezifiziert werden sollen.

(Ein anderer solcher Kandidat ist table { border-collapse: collapse }.)

Gunnar hat das getan, aber auch mit einer Prise Salz dabei: "Man tut wohl gut daran,..." - das ist in meinen Augen eine Empfehlung zweiter Klasse.

Jetzt erstklassig.

Rührt man sich Beispiele aus verschiedenen Quellen zu einem Codebrei zusammen, könnten die Zutaten nicht zusammen passen, weil längst nicht jeder das border-box Modell voraussetzt.

Wer kopiert schon fremden Code ohne zu wissen, was der tut? 😏

😷 LLAP

[Gunnar Bittersmann]

@@Jens

Hallo,

Gibt es im Wiki ein Muster, wo all dies berücksichtigt ist?

Gibt es im Forum ein Muster, dass du drängelst?

Nicht im Wiki, sondern in Beispielen wie diesem.

😷 LLAP

[Rolf B]

Hallo Gunnar,

Checkbox-Hack? Tssss.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Checkbox-Hack? Tssss.

Nö, das ist eine Option, die man an- und abwählen kann. 😜

😷 LLAP

[Gunnar Bittersmann]

@@Jens

reichlich > Moin,

was bewirkt folgendes

body {  
   height: 100;  

Im Standard-Modus: gar nichts. Ungültige Angaben werden ignoriert.

Nur im Quirks-Modus (den man durch <!DOCTYPE html> unbedingt vermeiden sollte) wird das als 100px gedeutet.^[1]

Kann bei min-height der body größer als 100% werden?

Klar, wenn der Seiteninhalt länger ist als auf eine Viewporthöhe passt.

😷 LLAP

---

1. wovon ich bei der CSSBattle Gebrauch mache ↩︎