调整 javascript 窗口的大小答案

【问题标题】：Resize javascript window调整 javascript 窗口的大小
【发布时间】：2011-09-02 19:19:29
【问题描述】：

如何将调整大小事件应用到此代码，以便在更改时获取窗口的新高度

$(document).ready(function() {
    $("#page").height($(window).height()); 
});

【问题讨论】：

重复的Javascript window resize event?
@Nightfirecat：不是真的。另一个更多的是关于事件本身......这个只是与它相关。

标签： javascript height window-resize

【解决方案1】：

$(function() {

    $(window).resize(function(){
        $("#page").height($(this).height());
    }).resize();

});

如您所见，我还通过简单地执行 $(function(){}) 来缩短了 $(document).ready(function(){})。

【讨论】：

感谢冠军，这是最优雅的解决方案。

【解决方案2】：

$(window).resize(function() { 
  $(document).ready(function() {
        $("#page").height($(window).height()); 
  });
});

应该可以正常工作。

或[更好的格式]

function resizePage()
{
      $(function() {
            $("#page").height($(window).height()); 
      });
}

$(window).resize(function() { resizePage(); });

【讨论】：

是的，以确保代码仅在 dom 就绪时运行。以防用户在加载时调整窗口大小。 [这有问题吗？]
那么为什么不在 DOM Ready 事件处理程序中包含它呢？所以它总是在 DOM 准备好时运行？这不是问题，但它看起来很奇怪，不可读，每次调整窗口大小时都会检查 DOM 准备好，而不是在 DOM 准备好时绑定事件，然后在每次调整大小时执行调整大小（没有任何额外的检查）。
谢谢兄弟，以后的编码中会像你说的那样实现它。 :)

【解决方案3】：

$("#page").click(function () {  
  showHeight("window", $(window).height());  
});

http://api.jquery.com/height/

确保它位于页面底部。

【讨论】：