Dynamic calculation of height on page load based on other elements' heights

Share your work Show and Tell
1

I am running this in a custom JS action on page load. Took me a while to get working so sharing in case this helps anyone else:

function updateMinHeight() {
    const navbar = document.getElementById('navbar');
    const footer = document.getElementById('bottom-footer');

    if (navbar && footer) {
        const navbarHeight = navbar.offsetHeight || 0;
        const footerHeight = footer.offsetHeight || 0;
        const dvh = `calc(100dvh - ${navbarHeight}px - ${footerHeight}px)`;

        console.log("✅ Calculated min-height:", dvh);

        // Update the WeWeb variable with the calculated min-height value
        wwLib.wwVariable.updateValue('5d970d29-cab2-443f-a961-1e95f4b31e8e', dvh);
    } else {
        console.warn("⏳ Navbar or footer not found yet, retrying...");
        setTimeout(updateMinHeight, 100); // Retry after 100ms
    }
}

// Run the function on page load
updateMinHeight();
3 Likes