我需要在加載頁面和調整頁面大小時根據窗口的大小設置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>