PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

CSS-Eigenschaft: height, Kategorien: Ausmaße (Höhen und Breiten) (allgemein), Visual formatting model details (CSS 2.1), Basic Box Model (CSS 3)

Höhe

Bestimmt die Höhe eines HTML-Block-Elements.

CSS-Eigenschaft: height
KurzbeschreibungWerteStandardwertKategorieHinweis
Höhe
  • <length>
  • <percentage>
  • auto
auto
Allgemein:
Ausmaße (Höhen und Breiten)
CSS 2.1:
Visual formatting model details
CSS 3:
Basic Box Model
 

Verwandte Eigenschaften aus der Kategorie: Ausmaße (Höhen und Breiten) (allgemein), Visual formatting model details (CSS 2.1), Basic Box Model (CSS 3):

Folgendes ist beim Einsatz von height zu beachten:

  • height erwartet Längenangaben in PX, PT, EM usw., alternativ eine % Angabe. Über den Wert auto kann eine geerbte Höhe zurückgesetzt werden.
  • Standardwert von height ist auto, das bedeutet, die Höhe eines Elements richtet sich nach dem darin befindlichen Inhalt. (Im Gegensatz zu zu width, dort richtet sich die Breite bei Inline-Elementen nach der Menge des Inhalts, bei Block-Elementen wird 100% des verfügbaren Raumes eingenommen).
  • height wirkt nur bei Block-Elementen. Sollen Inline-Elemente eine Höhe bekommen, müssen diese über display mit dem Wert block als Block-Element definiert werden. Ebenfalls verlieren Block-Elemente die Fähigkeit, ein height darzustellen, wenn sie durch display und dem Wert inline als Inline-Element deklariert sind.
  • Bei Angabe von Prozent-Angaben braucht height eine Bezugshöhe. Das direkte Elternelement muss eine definierte Höhe haben, damit das Element selber ein height darstellen kann.
  • 100% der Höhe sind 100% des Elternelements. Außenabstände (margin), Innenabstände (padding) und Rahmenbreite (border) addieren sich immer zu der Höhe eines Elements und lassen eine BOX von 100% mitunter wachsen. Genaueres ist unter der Beschreibung des Box-Mobell zu finden.
Browserunterstützung von height
Firefox
Firefox		Google Chrome
Google
Chrome		Internet Explorer
Internet
Explorer		Safari
Safari		Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu height:



Beispiele

HTML:

<div>
   <p>height / length in PX</p>
</div>

CSS:

div {
   border: 1px solid black;
   height: 200px;
   background-image: url('/img/gitter.png');
}
/* Anhand des Gitters kann die Auswirkung von heigth besser beobachtet werden. */
div p {
   height: 120px;
   background-color: #FF7700;
   margin: 0px;
}
/* Auch wenn das P-Tag weniger Text beinhaltet, nimmt die P-Box 120px ein. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 1 So sieht's aus:

height / length in PX

 

HTML:

<div>
   <p class="doPerc">height / percentage</p>
</div>

CSS:

div p.doPerc {
   height: 33%;
}
/* Ohne die Angabe der 200px im Beispiel Nr. 1 würde die %-Angabe nicht greifen. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 2 So sieht's aus:

height / percentage

 

HTML:

<div>
   <p class="doEm">height / length in EM</p>
</div>

CSS:

div p.doEm {
   height: 10em;
}
/* Beispiel für eine Angabe in EM. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 3 So sieht's aus:

height / length in EM

 

HTML:

<div>
   <span>SPAN</span>
</div>

CSS:

div span {
   height: 100px;
   background-color: #00A4FF;
}
/* Inline-Elemente können kein height darstellen. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 4 So sieht's aus:

SPAN
 

HTML:

<div>
   <span class="doBlock">SPAN</span>
</div>

CSS:

div span.doBlock {
   display: block;
}
/* Bekommt ein Inline-Element die Eigenschaft display: block greift die height. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 5 So sieht's aus:

SPAN
 

HTML:

<div>
   <p class="doInline">display: inline;</p>
</div>

CSS:

div p.doInline {
   display: inline;
}
/* Ein Block-Element kann keine Höhe darstellen, wenn es per display: inline zu einem Inline-Element gestylet wird. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 6 So sieht's aus:

display: inline;

 

HTML:

<div>
   <p>Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele! Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele! Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!</p>
</div>

CSS:

/* Ist mehr Inhalt vorhanden, als in die definierte Höhe passt, läuft der Text über die definierte Höhe hinaus. Die Hintergrundfarbe hält die definierte Höhe allerdings ein.*/
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 7 So sieht's aus:

Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele! Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele! Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!

 

HTML:

<div class="doPerc">
   DIV height / percentage
</div>

CSS:

div.doPerc {
   height: 30%;
   background-color: #00FF00;
}
/* ohne Bezugshöhe sind %-Angaben ohne Auswirkung */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 8 So sieht's aus:

DIV height / percentage
 

HTML:

<div>
   <div class="doSec">
      <p>2nd Level DIV height / percentage</p>
   </div>
</div>

CSS:

div div.doSec {
   height: auto;
   background-color: yellow;
}
div div.doSec p {
   height: 90%;
   background-color: #005FFF;
}
/* Auch die explizite Angabe einer Höhe, hier mit dem Wert auto, führt nicht dazu, dass eine %-Angabe greifen kann. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 9 So sieht's aus:

2nd Level DIV height / percentage

 

HTML:

<div>
    <p class="do100Perc">100% height / percentage</p>
</div>

CSS:

p.do100Perc {
   height: 100%;
   margin: 20px;
   border: 20px solid red;
   background-color: #ff0;
   padding: 20px;
)
/* Hier werden die 100% umgesetzt. Allerdings führen Abstände und Rahmen dazu, dass das P-Tag weit über die 100% des Elternelements hinaus wächst. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 10 So sieht's aus:

100% height / percentage

 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 17. 01. 2024
Render Time: 0.134 sec.