javascript - 我需要在加载页面和调整页面大小时根据窗口的大小设置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 来设置相对于视口(viewport)的尺寸。

使用viewport percentage height

1/100th of the height of the viewport.

.infobox {
    height: 100vh;
}

<小时/>

如果你仍然想使用JS(我不知道为什么使用CSS会是更好的方法)，

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

代码:

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