Höhe ohne Navbar in px berechnen?
Ich hab auf meiner Seite ne Navbar und darunter soll content.
Ich benutz für Charts Fremdkomponenten, und da muss ich ne Höhe angeben, in px. Das Diagramm soll den gesamten restlichen Platz einnehmen, also "100% - Navbar"
Wie kann man die Höhe in px berechnen?
1 Antwort
Du kannst die calc-Funktion benutzen. Angenommen, deine Navigationsleiste ist 60px hoch. Dann ließe sich die restliche Höhe in CSS folgendermaßen berechnen:
height: calc(100% - 60px);
Oder du verwendest JavaScript für die Rechnung:
const viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
const contentHeight = viewportHeight - 60;
Um möglichst responsive zu bleiben, solltest du (bei dem zuletzt gezeigten Weg) dann allerdings auch Änderungen der Browserfenstergröße im Auge behalten.
window.addEventListener("resize", () => {
// calculate height and set it ...
});
Du brauchst dafür den Container, der die Navigation abbildet.
Beispiel:
<nav id="navigation-container"><!-- navigation ... --></nav>
Skript:
const navigationBox = document.getElementById("navigation-container");
const height = navigationBox.getBoundingClientRect().height;
Dieser Wert schließt den Inhalt, Innenabstand und die Rahmendicke mit ein. Wenn du zusätzlich noch den Außenabstand brauchst (was ich aber kaum glaube), kannst du ihn dir folgendermaßen holen:
const styles = getComputedStyle(navigationBox);
const margin = parseFloat(styles["marginBottom"]) + parseFloat(styles["marginTop"]);
Perfekt, ich brauch die Berechnung via JS (bzw. in meinem Projekt C# mit Blazor)
Gibt es auch eine Möglichkeit, die Höhe der Navbar rauszufinden? Ich glaube die ist nämlich nicht fix auf eine Höhe in px gesetzt, sondern passt sich dem Content an. Also größere Schrift -> größere Navbar
Danke dir :)