javascript - $ ("#my-div").css ("height", $(window).outerHeight() + "px");适用于 window.resize() 但不适用于 $(window).load()

Question

正如标题所说，我试图将我的 div 的高度设置为等于我的视口(viewport)的高度，但它似乎只在我调整窗口大小时而不是在加载页面时触发。完整代码如下所示:

$(window).load(function() { resize_div(); });
window.onresize = function(event) { resize_div(); };

function resize_div() {
  $("#my-div").css("height", ($(window).outerHeight() - $("#menu").outerHeight()) + "px");
}

为什么它在窗口调整大小时起作用，但现在在窗口加载时起作用？预先感谢您的帮助。

更新

以下是一些其他不起作用的东西:

$(document).ready(function() {
  resize_div();
});
window.onload = function(event) { resize_div(); };
$("#my-div").on("load", function() { resize_div(); });
setTimeout(resize_div(), 3000); # this was put inside $(document).ready()

更新2

我向 $(document).ready() 和 $(window).load() 添加了警报，这两个警报都在时间线之前触发嵌入已加载。所以我认为这可能是一个超出我如何表达我的问题范围的问题。我正在使用的应用程序 - Shiny，有点像 Python 的 Flask 模块 - 大概是在加载网页，然后将 div 动态注入(inject)网页主体，这就是该功能无法正常工作的原因。但是，将 console.log 添加到 resize_div 也不会产生任何输出，所以我不认为这只是 div 没有立即出现的问题.

Answer 1

你应该试试这个，这对我有用。

$(function(){
  resize_div();
  window.onresize = function(event) { resize_div(); };
});


function resize_div() {
  alert(0);
  $("#my-div").css("height", ($(window).outerHeight() - $("#menu").outerHeight()) + "px");
  $("#my-div").css("background-color","yellow");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="my-div">adfggfgsdgsfdgsfhfg</div>
<div id="menu" style="height:100px;">MenuDiv</div>