How do I watch the element size on load AND resize of the window with vanilla JS?

Question

I want to resize the height of a <div id="main">something</div> automatically so that even when it's empty, it has a min-height of the full screen height minus the header. It's working on load but not the resize. If I resize, I have to refresh the screen for it to recalcalculate. I'd love to have this watch the screen so that it resizes on-the-fly. How can I do this with my current code or a different approach?

let main = document.getElementById('main');
let fullscreen = window.innerHeight;
let headerHeight = document.getElementById('navHeader').offsetHeight;
let newsletterHeight = document.getElementById('newsletter').offsetHeight;
let footerHeight = document.getElementById('footer').offsetHeight;
let addHeight = headerHeight + newsletterHeight + footerHeight;
let computedHeight = fullscreen - addHeight + 7;

window.addEventListener('load', function() {
  document.getElementById('main').style.cssText = `min-height:${computedHeight}px;`;
});

window.addEventListener('resize', function() {
  document.getElementById('main').style.cssText = `min-height:${computedHeight}px;`;
});

In my code, I am grabbing the window innerHeight, the header height, a newsletter element height that is flushed under the header, and the footer height. Adding it all together. Then computer the remainder as my main body real estate. This is the element that resizes depending on the size and calculations.

Here is the HTML of a blank page is you need it, (ignore the PHP inclusions)

<html>
  <head>
    <title>Fitness & Lifestyle | Contact</title>
    <?php include ('./partials/header.php') ?>
  </head>
  <body>
    <?php include ('./partials/nav.php') ?>

    <section class="mt-7" id="newsletter">
      <?php include ('./partials/newsletter.php') ?>
    </section>
    <section id="main"></section>


    <?php include ('./partials/footer.php') ?>
  </body>
</html>

Thanks in advance

Answer 1

That's because you calculate the computedHeight only once in the page load. Every time you the resize handler is firing, computedHeight is the same value.

You need to re-calculate it in every resize. Something like this:

function resizeMain() {
  let main = document.getElementById('main');
  let fullscreen = window.innerHeight;
  let headerHeight = document.getElementById('navHeader').offsetHeight;
  let newsletterHeight = document.getElementById('newsletter').offsetHeight;
  let footerHeight = document.getElementById('footer').offsetHeight;
  let addHeight = headerHeight + newsletterHeight + footerHeight;
  let computedHeight = fullscreen - addHeight + 7;
  document.getElementById('main').style.cssText = `min-height:${computedHeight}px;`;
}

calculateHeight();
window.addEventListener('load', resizeMain);

Although, I'm not sure it's a wise approach because for each resize you'll do some heavy calculation. You may want to use some kind of debounce function.

How do I watch the element size on load AND resize of the window with vanilla JS?

Question

1 answers

solution1
2 ACCPTED 2019-07-07 16:11:12

How do I watch the element size on load AND resize of the window with vanilla JS?

Question

1 answers

solution1 2 ACCPTED 2019-07-07 16:11:12

solution1
2 ACCPTED 2019-07-07 16:11:12