Jquery获取窗口大小并应用于div css并调整浏览器调整大小答案

【问题标题】：Jquery get size of window and apply to div css and adjust on browser resizeJquery获取窗口大小并应用于div css并调整浏览器调整大小
【发布时间】：2015-05-15 16:17:49
【问题描述】：

好的，所以我想制作一个 div 全屏。我能做到这一点的唯一方法是通过 JavaSript/jQuery。 CSS 不适用于这个。

我想获取浏览器的大小并将该大小应用于 div 的 css。

$(function(){

  var wheight = $(window).height();

  $(window).resize(function() {
    wheight = $(window).height();
  });

  $('.slide').css({"height":wheight+"px"});

});

它有点工作，但是窗口调整大小部分不起作用，并且 css 不会即时调整到浏览器的高度。

知道我哪里出错了吗？

谢谢

【问题讨论】：

尝试将$('.slide').css({"height":wheight+"px"}); 放入window.resize 函数中
为什么 css 不起作用？ html, body, body>div {height: 100%; margin:0;padding:0; overflow:hidden}请张贴您的html

标签： javascript jquery

【解决方案1】：

您只设置一次元素的大小，而不是每次调整窗口大小时。我会这样做：

$(function () {

    //Adjust element dimensions on resize event
    $(window).on('resize', function () {
        $('.slide').css('height', $(this).height() + "px");
    });

    //Trigger the event
    $(window).trigger('resize');
});

【讨论】：

【解决方案2】：

试试这个：

$(function(){

   var wheight = $(window).height();

   $(window).resize(function() {
      wheight = $(window).height();
      $('.slide').css({"height":wheight+"px"});
    });

});

【讨论】：