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

**URL:** <https://community.weweb.io/t/dynamic-calculation-of-height-on-page-load-based-on-other-elements-heights/17279>\
**Category:** Show and Tell\
**Created:** [March 18, 2025, 9:15pm UTC](https://community.weweb.io/t/dynamic-calculation-of-height-on-page-load-based-on-other-elements-heights/17279 "2025-03-18T21:15:42Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [March 18, 2025, 9:15pm UTC](https://community.weweb.io/t/dynamic-calculation-of-height-on-page-load-based-on-other-elements-heights/17279/1 "2025-03-18T21:15:42Z")

</div>

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:

```auto
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();

```