问如何使用vanilla JS查看加载和调整窗口大小时的元素大小？
EN

Stack Overflow用户

提问于 2019-07-07 23:58:20

回答 1查看 275关注 0票数 0

我想自动调整<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>

提前感谢

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-08 00:11:13

这是因为在页面加载过程中只需要计算一次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函数。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56923801

复制

相似问题

问如何使用vanilla JS查看加载和调整窗口大小时的元素大小？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用vanilla JS查看加载和调整窗口大小时的元素大小？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用vanilla JS查看加载和调整窗口大小时的元素大小？
EN