Element.clientHeight — Eigenschaft · JavaScript-Referenz

Signatur

get Element.clientHeight

Beschreibung

Element.clientHeight gibt die innere Höhe eines Elements in CSS-Pixeln an. Der Wert setzt sich aus der Höhe des Inhalts und dem oberen und unteren padding zusammen. Nicht mitgezählt werden border, margin und eine eventuell vorhandene horizontale Scrollleiste.

Elemente ohne CSS-Layout-Box oder mit reiner Inline-Box liefern 0 (in der deutschen MDN-Übersetzung steht dafür „null“ im Sinne der Zahl Null, nicht der Wert null). Das betrifft zum Beispiel <span> mit display: inline, Elemente mit display: none und Elemente, die nicht im DOM hängen.

Ein Sonderfall ist das Wurzelelement document.documentElement (im Quirks-Modus stattdessen document.body). Dort liefert clientHeight die Höhe des Viewports ohne horizontale Scrollleiste. Das ist praktisch, um den tatsächlich sichtbaren Bereich zu bestimmen.

Typische Einsatzfälle sind: prüfen, ob ein Container scrollbar ist (scrollHeight > clientHeight), erkennen, ob eine Liste bis zum Ende gescrollt wurde (für unendliches Nachladen), und sichtbare Bereiche für eigene Layout-Berechnungen ausmessen. Möchte man die Höhe inklusive Rahmen, nimmt man offsetHeight. Für Werte mit Nachkommastellen eignet sich getBoundingClientRect().

Rückgabewert

Typ

number

Beschreibung

Ganzzahlige innere Höhe in CSS-Pixeln (Inhalt + Padding, ohne Rahmen, Außenabstand und horizontale Scrollleiste). Bei Elementen ohne Layout-Box oder Inline-Elementen ist der Wert 0.

Beispiele

Innere Höhe eines Containers auslesen

// HTML: <div id="box" style="height:100px; padding:10px; border:5px solid; margin:20px"></div>
const box = document.getElementById('box');

console.log('clientHeight:', box.clientHeight); // 100 + 2 × 10 Padding
console.log('offsetHeight:', box.offsetHeight); // zusätzlich 2 × 5 Rahmen

clientHeight: 120 offsetHeight: 130

Prüfen, ob ein Element scrollbar ist

const isScrollable = (el) => el.scrollHeight > el.clientHeight;

const log = document.querySelector('.log-output');
if (isScrollable(log)) {
  log.classList.add('has-scroll-shadow');
  console.log('Inhalt ist höher als der sichtbare Bereich');
}

Inhalt ist höher als der sichtbare Bereich

Ende einer Liste erkennen (unendliches Nachladen)

const list = document.querySelector('#feed');
let loading = false;

list.addEventListener('scroll', async () => {
  // 50 px Toleranz vor dem Ende
  const nearBottom = list.scrollTop + list.clientHeight >= list.scrollHeight - 50;
  if (nearBottom && !loading) {
    loading = true;
    const res = await fetch('/api/feed?offset=' + list.children.length);
    const items = await res.json();
    items.forEach((text) => {
      const li = document.createElement('li');
      li.textContent = text;
      list.append(li);
    });
    loading = false;
  }
});

Sichtbare Viewport-Höhe ohne Scrollleiste

const viewportHeight = document.documentElement.clientHeight;
console.log(`Viewport: ${viewportHeight}px, window.innerHeight: ${window.innerHeight}px`);

// Das Inline-Element liefert 0
const span = document.createElement('span');
document.body.append(span);
console.log(span.clientHeight);

Viewport: 937px, window.innerHeight: 937px 0

// Wichtig · Fallstricke

Rundung: Der Wert wird immer auf eine ganze Zahl gerundet. Braucht man Nachkommastellen, zum Beispiel bei Zoom oder transformierten Elementen, nimmt man getBoundingClientRect().height. Diese Methode berücksichtigt allerdings Rahmen und CSS-Transformationen.
Reflow: Das Lesen von clientHeight erzwingt eine synchrone Layout-Berechnung. Wenn Lesen und Schreiben von Stilen in Schleifen abwechseln, entsteht „Layout Thrashing“. Daher Messungen bündeln oder zu ResizeObserver greifen.
Wert 0: Bei display: none, Inline-Elementen und nicht eingehängten Elementen ist der Wert immer 0. Das ist kein Fehler.
Scrollleiste: Eine horizontale Scrollleiste wird abgezogen. Auf Systemen mit überlagernden Scrollleisten (macOS, Mobilgeräte) fällt dieser Unterschied weg.
Viewport: document.documentElement.clientHeight unterscheidet sich von window.innerHeight, weil innerHeight die Scrollleiste mitzählt. Auf Mobilgeräten ändert sich die Höhe außerdem, wenn die Adressleiste ein- oder ausgeblendet wird. Dafür eignet sich visualViewport besser.
Schreibschutz: Zuweisungen werden stillschweigend ignoriert. Zum Ändern der Höhe setzt man style.height.
Die Eigenschaft wird in allen Browsern unterstützt. Seit dem CSSOM View Module ist sie auf Element definiert, früher auf HTMLElement.

Siehe auch

Element.clientWidth Element.scrollHeight Element.scrollTop HTMLElement.offsetHeight Element.clientTop Element.getBoundingClientRect() ResizeObserver Window.innerHeight