CSS/Eigenschaften/Größenangaben/height

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Sie können für bestimmte Elemente die Höhe ihrer Inhaltsbereiche festlegen. Die Eigenschaft height wirkt dabei nur auf Elemente, die auf Blockebene erzeugt wurden. Die Höhe von Inline-Elementen wird durch den Wert der Eigenschaft line-height bestimmt. Die Eigenschaft overflow regelt das Verhalten für den Fall, dass die zur Verfügung stehende Höhe für den Inhalt des Elements nicht ausreichend ist.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0
Beispiel
div#foo { height: 2em; }

Die Eigenschaft height legt die Höhe bestimmter Elemente fest. Erlaubt sind folgende Werte:

  • eine nicht-negative Längenangabe
  • eine Prozentangabe, dieser bezieht sich auf die Höhe des umschließenden Blocks
  • auto, weist den Browser an, die Höhe so zu ermitteln, als ob keine Angabe zu height erfolgt wäre, Ausgangswert
  • inherit, Höhenangabe des Elternelements
Beachten Sie: Prozentangaben bleiben wirkungslos, wenn der umschließende Block keine festen Höhenangaben hat. Das Element richtet sich dann nach dem enthaltenen Inhalt.[1]

Magic Numbers[Bearbeiten]

Mit festen Zahlenwerten (auch engl. „Magic Numbers“ genannt) erreichen Sie unter bestimmten Umständen das Gewünschte, aber in anderen Kontexten wie geänderten Viewport- oder Schriftgrößen wird das Layout zerstört. Meistens wurden sie von Entwicklern verwendet, die nur in ihrem eigenen Browser unter Idealbedingungen getestet wurden.

Empfehlung: Verwenden Sie
  • keine festen Werte für die Breite
  • keine festen Werte für die Höhe eine Elements, sondern lassen dem Inhalt (auch bei geänderter Schriftgröße) den nötigen Platz. Regeln Sie Abstände über padding.
  • relative relative Längenmaße wie em, die sich an geänderte Schriftgrößen anpassen.

siehe auch[Bearbeiten]

Quellen[Bearbeiten]

  1. stackoverflow: Working with the CSS height property and percentage values