如何使用香草JS观察加载时的元素大小以及窗口的大小调整？

Question

我想自动调整<div id="main">something</div>的高度，以便即使它为空，它的全屏高度的最小高度减去标题的高度。 它正在加载，但没有调整大小。 如果我调整大小，则必须刷新屏幕才能重新计算。 我希望这款手表能够在屏幕上显示，以便即时调整尺寸。 如何使用当前代码或其他方法执行此操作？

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;`;
});

在我的代码中，我抓取了窗口innerHeight，页眉高度，在页眉下方刷新的新闻稿元素高度和页脚高度。 全部加在一起。 然后将其余部分作为我的主要房地产。 这是根据大小和计算来调整大小的元素。

这是您需要的空白页面的HTML，（忽略PHP包含）

<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>

提前致谢

Answer 1

那是因为您在页面加载中只computedHeight一次了一次computedHeight计算的computedHeight 。 每次触发调整大小处理程序时， computedHeight都是相同的值。

您需要在每次调整大小时重新计算。 像这样：

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);

虽然，我不确定这是一个明智的方法，因为对于每次调整大小，您都会进行大量的计算。 您可能要使用某种debounce功能。

如何使用香草JS观察加载时的元素大小以及窗口的大小调整？

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-07-07 16:11:12

如何使用香草JS观察加载时的元素大小以及窗口的大小调整？

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-07-07 16:11:12

解决方案1
2 已采纳 2019-07-07 16:11:12