Dynamisch Höhen berechnen mit JavaScript und CSS Variabeln

Dynamische Höhen mit Javascript und CSS
BootstrapCSSJavaScript

Es gibt verschiedenste Szenarien warum mit JavaScript die Höhe von Elementen berechnet werden soll. Ich jedenfalls habe hin und wieder die Herausforderung Elemente mittels CSS korrekt zu positionieren, wenn die Höhe anderer Elemente nicht bekannt ist.

Ein typisches Beispiel: Zuerst kommt die Menüleiste und anschließend ein Slider als „full screen“ Element. Ich möchte in meinem Beispiel die Menüleiste nicht „absolute“ über den Slider platzieren, sondern die Elemente sollen aneinandergereiht sein, ohne das die Menüleiste einen fixen Höhenwert erhält. Die Herausforderung besteht nun darin, die Sliderhöhe zu berechnen und auch responsive zugänglich zu machen.

Natürlich könnte nun alles mittels JavaScript berechnet und positioniert werden. JavaScript sollte aber nie die Rolle des CSS ersetzen, denn CSS kann mittlerweile sehr viel, es braucht manchmal nur etwas Unterstützung. Das vorgestellte Snippet soll die Handhabung zwischen JavaScript und CSS vereinfachen.

CSS Klasse definieren

Die grundsätzliche Idee ist es mittels JavaScript CSS Variabeln zu erstellen und diese im CSS zu nutzen, um die Elementhöhe zu berechnen.

.slider {
	height: calc(100vh - var(--menubar-height));
}

Zunächst aber benötigen wir eine CSS Klasse die vom JavaScript angesprochen werden kann. set-css-height-var ist hierfür eindeutig genug und benötigt noch Parameter die gefüttert werden müssen:

  • Das angesprochene Elemente (sich selbst oder ein untergeordnetes)
  • Eindeutige Bezeichnung der künftigen Variabel
  • Optional: Den Breakpoint, um die Erstellung der Variabel zu verhindern. Das ist wichtig, wenn z.B. Mobil keine Berechnung stattfinden soll (Ich nutze an dieser Stelle Bootstrap Bezeichnungen. Du kannst hier je nach Bedarf natürlich auch mit konkreten Werten arbeiten).

Das folgende HTML Element enthält die entsprechende Klasse:

<div class="slider set-css-height-var(self,slider,md)"></div>
  • self gibt an, dass sich die Berechnung auf sich selbst beziehen soll
  • slider ist als Variabel natürlich nicht eindeutig genug. Das Script hängt später aber selbst noch ein -height mit an, sodass wir an dieser Stelle darauf verzichten können.
  • Die Berechnung soll erst ab dem Breakpoint md passieren

CSS Variabeln mit JavaScript erstellen

Breakpoints definieren

Wenn du mit Breakpoints arbeiten möchtest, solltest du zunächst die Breakpoints festlegen. Ich orientiere mich dabei an den Bootstrap Breakpoints und Bezeichnungen:

var breakpoints = {
    xs: '0',
    sm: '576px',
    md: '768px',
    lg: '992px',
    xl: '1200px',
    xxl: '1400px',
};

Die JavaScript Funktion

Ich erkläre dir die Funktion nun Zeile für Zeile. Wenn du dir direkt die ganze Funktion ansehen möchtest scrolle weiter runter.

Wir definieren unsere Funktion set_css_height_var() und gehen direkt an dessen Inhalt. Als erstes brauchen wir eine Liste mit allen Elementen die unsere Klasse set-css-height-var referenzieren.

let elements = document.querySelectorAll('[class*=set-css-height-var]');

und wenn entsprechende vorhanden sind iterieren wir mittels einer forEach Schleife.

if (elements) {
    elements.forEach(element => {
        ...
    });
}

Innerhalb der forEach Schleife wird die CSS Klasse nun aufgebrochen, um die Parameter nutzen zu können. Hierzu speichern wir die Klassen zunächst in einer Variabel.

let element_classlist = element.classList.value;

Anschließend filtern die Parameter aus unserer oben definierten Klasse.

let parameters = element_classes.match(/set-css-height-var\((.*?)\)/);

Nun trennen wir die Parameter mittels split auf und speichern alle wichtigen Information in den folgenden Variabeln:

parameters = parameters[1].split(',');

let element_to_find = parameters[0] == 'self' ? element : element.querySelector(parameters[0]);
let element_to_find_height = element_to_find.getBoundingClientRect().height;
let name_to_set = parameters[1];
let breakpoint = parameters[2];
  • element_to_find definiert das zu findende Elemente
  • element_to_find_height speichert die Höhe des Elementes
  • name_to_set enthält die Bezeichnung unserer CSS Variabel
  • breakpoint den definierten Breakpoint

Final folgt nun das setzen der CSS Variabel unter der Bedingung ob ein Breakpoint gesetzt wurde oder nicht.

if (breakpoint) {
    if (window.matchMedia('(min-width: ' + breakpoints[breakpoint] + ')').matches) {
        document.documentElement.style.setProperty('--' + name_to_set + '-height', element_to_find_height + 'px');
    } else {
        document.documentElement.style.removeProperty('--' + name_to_set + '-height');
    }
} else {
    document.documentElement.style.setProperty('--' + name_to_set + '-height', element_to_find_height + 'px');
}

Das JavaScript ausführen, um CSS Variabeln zu erstellen

Das war es jetzt auch schon fast! Die Funktion muss nur noch initial und beim verändern des Browserfensters aufgerufen werden.

document.addEventListener('DOMContentLoaded', () => {
    set_css_height_var();

    window.onresize = () => {
        set_css_height_var();
    };
});

Die komplette Funktion

var breakpoints = {
    xs: '0',
    sm: '576px',
    md: '768px',
    lg: '992px',
    xl: '1200px',
    xxl: '1400px',
};

function set_css_height_var() {
    let elements = document.querySelectorAll('[class*=set-css-height-var]');

    if (elements) {
        elements.forEach(element => {
            let element_classlist = element.classList.value;
            let parameters = element_classes.match(/set-css-height-var\((.*?)\)/);
            parameters = parameters[1].split(',');
            let element_to_find = parameters[0] == 'self' ? element : element.querySelector(parameters[0]);
            let name_to_set = parameters[1];
            let breakpoint = parameters[2];
            let element_to_find_height = element_to_find.getBoundingClientRect().height;

            if (breakpoint) {
                if (window.matchMedia('(min-width: ' + breakpoints[breakpoint] + ')').matches) {
                    document.documentElement.style.setProperty('--' + name_to_set + '-height', element_to_find_height + 'px');
                } else {
                    document.documentElement.style.removeProperty('--' + name_to_set + '-height');
                }
            } else {
                document.documentElement.style.setProperty('--' + name_to_set + '-height', element_to_find_height + 'px');
            }
        });
    }
}

document.addEventListener('DOMContentLoaded', () => {
    set_css_height_var();
    window.onresize = function () {
        set_css_height_var();
    };
});

CSS Variabeln nutzen

Nun können die Variabeln, wie zu Beginn aufgezeigt wurde, genutzt werden, um dynamisch und responsiv Positionen und Höhen zu bestimmen. Die Variabeln können dabei auch kombiniert und ergänzt werden.

.slider {
    height: calc(100vh - var(--menubar-height) - var(--topbar-height) + 20px);
}

Schreibe einen Kommentar