Javascript 我需要根据加载页面和调整页面大小时窗口的大小设置div的高度

我需要一个函数，根据加载页面和调整页面大小时窗口的大小设置div的高度

相反，我有一个只增加div长度的函数，只有在调整窗口大小时

我自己并不擅长javascript，这是我在完成网页之前最不需要的东西，所以任何帮助都将不胜感激

这是页面，讨论中的div是浅灰色信息框，其中包含文本和左侧的按钮：

这是我当前拥有的函数的代码：

<script>
$(document).ready(function() {
    $(window).on("resize", function() {

        var bodyheight = $(document).height();

        $(".infobox").height(bodyheight);
    });
});
</script>

---

无需使用Javascript设置相对于视口的尺寸

使用

视口高度的1/100

如果您仍然想使用JSI，我不知道为什么使用CSS会是更好的方法

调整大小事件绑定不需要包装在ready中 要获取窗口高度，请使用$window.height 使用触发器在页面加载时强制执行事件处理程序 代码：

您是否考虑过使用vh和vw CSS单元而不是JavaScript

.infobox { width: 100vh; height: 100vh; }

支持： 细节： 文件：

---

加载页面时不运行“调整大小”。因此，在PageReady上，您只需为将来发生的调整大小创建一个事件处理程序。

您的脚本按原样工作。为了调整div onload的大小，只需调用.resize方法而不需要任何参数

<script>
$(document).ready(function() {
    $(window).on("resize", function() {
        var bodyheight = $(document).height();
        $(".infobox").height(bodyheight);
    });
    $(window).resize(); // THIS EMULATES THE RESIZE EVENT ONDOCUMENTREADY
});
</script>

---

将代码放入函数中。加载页面时调用该函数，并将其用作调整大小事件的处理程序。如果CSS将其弄糟，则问题在于CSS，而不是JS。当CSS更好、更快，并且设计为满足您的需要时，不要使用JS进行样式设置。只有在调整页面大小时，才会调用resize，这只有在准备就绪后才会发生。这不是做你想做的事情的正确方式，CSS才是正确的方式。不管你想要什么，你做错了是一个有效的答案。

.infobox { width: 100vh; height: 100vh; }

<script>
$(document).ready(function() {
    $(".infobox").height($(window).height());
    $(window).on("resize", function() {
        $(".infobox").height($(window).height());
    });
});
</script>

<script>
$(document).ready(function() {
    $(window).on("resize", function() {
        var bodyheight = $(document).height();
        $(".infobox").height(bodyheight);
    });
    $(window).resize(); // THIS EMULATES THE RESIZE EVENT ONDOCUMENTREADY
});
</script>