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

Question

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

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

我本人并不擅长javascript，这是我在完成网页之前需要做的最后一件事，因此，我们将不胜感激！

这是页面，相关的div是左侧的浅灰色信息框（包含文本和按钮）： http : //goodshitdesign.no/

这是我目前拥有的功能的代码：

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

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

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

Answer 1

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

使用视口百分比高度

视口高度的1/100。

.infobox {
    height: 100vh;
}

---

如果您仍然想使用JS（ 我不知道为什么在使用CSS时会更好 ），

1. resize事件绑定不需要ready
2. 要获取窗口高度，请使用$(window).height()
3. 使用trigger强制在页面加载时执行事件处理程序

码：

$(window).on("resize", function () {
    $(".infobox").height($(window).height());
    //                   ^^^^^^^^^
}).trigger('resize');
// ^^^^^^^^^^^^^^^^^

Answer 2

您是否考虑过使用vh和vw CSS单元代替JavaScript？

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

• 支持： http ： //caniuse.com/#feat=viewport-units
• 详细信息： http : //snook.ca/archives/html_and_css/vm-vh-units
• 文件： https ： //developer.mozilla.org/en/docs/Web/CSS/length#Viewport-percentage_lengths

Answer 3

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

加载页面时，“调整大小”不运行。 因此，在准备好页面时，您只需创建一个事件处理程序以调整将来的大小。

Answer 4

您的脚本按原样工作。 为了调整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>