Fatal编程技术网
  • javascript/
  • Javascript 如何使用Villa JS查看加载时的元素大小和窗口大小？

Javascript 如何使用Villa JS查看加载时的元素大小和窗口大小？

javascript

Javascript 如何使用Villa JS查看加载时的元素大小和窗口大小？,javascript,Javascript,我想自动调整某物的高度，这样即使它是空的，它也有一个全屏高度减去标题的最小高度。它可以加载，但不能调整大小。如果我调整大小，我必须刷新屏幕以重新计算。我想把这块手表放在屏幕上，这样它可以随时调整大小。如何使用当前代码或其他方法实现这一点 let main=document.getElementById（'main'）； 让全屏=window.innerHeight； 让headerHeight=document.getElementById（'navHeader'）.offsetHeight；

我想自动调整
某物的高度，这样即使它是空的，它也有一个全屏高度减去标题的最小高度。它可以加载，但不能调整大小。如果我调整大小，我必须刷新屏幕以重新计算。我想把这块手表放在屏幕上，这样它可以随时调整大小。如何使用当前代码或其他方法实现这一点


let main=document.getElementById（'main'）；
让全屏=window.innerHeight；
让headerHeight=document.getElementById（'navHeader'）.offsetHeight；
让newslettesheight=document.getElementById（'newslettesheight'）.offsetHeight；
让footerHeight=document.getElementById（'footer'）.offsetHeight；
让addHeight=人头高度+身高+页脚高度；
让computedHeight=全屏-添加高度+7；
addEventListener（'load'，function（））{
document.getElementById（'main'）.style.cssText=`min height:${computedeheight}px；`；
});
addEventListener（'resize'，function（））{
document.getElementById（'main'）.style.cssText=`min height:${computedeheight}px；`；
});


在我的代码中，我抓取了窗口内部高度、页眉高度、在页眉下方齐平的新闻稿元素高度以及页脚高度。把它们加在一起。然后电脑把剩下的作为我的主体房地产。这是根据大小和计算调整大小的元素

这是你需要的空白页面的HTML（忽略PHP包含内容）



健身与生活方式|联系方式



提前感谢
这是因为您在页面加载中只计算了一次
计算高度
。每次启动调整大小处理程序时，
computedeheight
都是相同的值

您需要在每次调整大小时重新计算它。大概是这样的：


函数resizeMain（）{
让main=document.getElementById（'main'）；
让全屏=window.innerHeight；
让headerHeight=document.getElementById（'navHeader'）.offsetHeight；
让newslettesheight=document.getElementById（'newslettesheight'）.offsetHeight；
让footerHeight=document.getElementById（'footer'）.offsetHeight；
让addHeight=人头高度+身高+页脚高度；
让computedHeight=全屏-添加高度+7；
document.getElementById（'main'）.style.cssText=`min height:${computedeheight}px；`；
}
计算重量（）；
window.addEventListener（'load'，resizeMain）；



尽管如此，我不确定这是否是一种明智的方法，因为对于每次调整大小，您都会进行一些繁重的计算。您可能需要使用某种函数。
这是因为在页面加载中只计算一次
计算高度。每次启动调整大小处理程序时，
computedeheight
都是相同的值

您需要在每次调整大小时重新计算它。大概是这样的：


函数resizeMain（）{
让main=document.getElementById（'main'）；
让全屏=window.innerHeight；
让headerHeight=document.getElementById（'navHeader'）.offsetHeight；
让newslettesheight=document.getElementById（'newslettesheight'）.offsetHeight；
让footerHeight=document.getElementById（'footer'）.offsetHeight；
让addHeight=人头高度+身高+页脚高度；
让computedHeight=全屏-添加高度+7；
document.getElementById（'main'）.style.cssText=`min height:${computedeheight}px；`；
}
计算重量（）；
window.addEventListener（'load'，resizeMain）；



尽管如此，我不确定这是否是一种明智的方法，因为对于每次调整大小，您都会进行一些繁重的计算。您可能需要使用某种函数。
有什么原因不能只使用CSS吗？处理布局是其存在的主要原因之一<代码>：根{-hhheight:300px；}头{height:var（--hhheight）；}主{min height:calc（100vh-var（--hhheight））；}
？还有一点：即使脚本被阻止，你的页面现在也能正确布局。可能页眉没有固定的高度。无论如何，我希望不是。如果它是一个标题，我当然希望它是，这样它在所有共享标题的页面上都是一致的。因为作为网站所有者，你知道你的标题中有什么。但是你不知道浏览器将如何呈现字体和一些你喜欢的其他技巧。浏览器将计算高度。所有这些都很棒！我想我没想过。我可以用CSS来做。我就是这样做的。我正在试验JS调整大小以进行比较。但你是对的，有什么原因不能只使用CSS吗？处理布局是其存在的主要原因之一<代码>：根{-hhheight:300px；}头{height:var（--hhheight）；}主{min height:calc（100vh-var（--hhheight））；}
？还有一点：即使脚本被阻止，你的页面现在也能正确布局。可能页眉没有固定的高度。无论如何，我希望不是。如果它是一个标题，我当然希望它是，这样它在所有共享标题的页面上都是一致的。因为作为网站所有者，你知道你的标题中有什么。但是你不知道浏览器将如何呈现字体和一些你喜欢的其他技巧。浏览器将计算高度。所有这些都很棒！我想我没想过。我可以用CSS来做。我就是这样做的。我正在试验JS调整大小以进行比较。但你是对的 
<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>