使用jQuery动态调整元素大小以适应窗口大小

Question

我查看了很多关于这个主题的问题，似乎找不出我的代码有什么问题。希望能得到帮助！非常感谢！

$(window).resize(function(){
   var newwidth = $(window).innerWidth();
   var newheight = $(window).innerHeight();      
   $("#element").height(newheight).width(newwidth);
       });

如果窗口大小改变，我想把#element的高度和宽度调整为与窗口相同大小。

- d-_-b

---

请看这个fiddle：http://jsfiddle.net/aBHRp/1/ - Kyeotic

帮我看看，http://stackoverflow.com/questions/33360273/window-disptachevent-resizing-issue - Phoenix Haroz

Answer 1

关于.innerWidth()，来自文档：

此方法不适用于窗口和文档对象；对于这些对象，请使用.width()。

.innerHeight()也有同样的说明。

因此，您需要使用.width()和.height()：

$(window).resize(function(){
    var newwidth = $(window).width();
    var newheight = $(window).height();      
    $("#element").height(newheight).width(newwidth);
});

- Engineer

---

谢谢回复。有趣的是，如果我使用alert(newwidth)，我确实得到了正确的宽度。 - d-_-b

@Tyrsius 或许存在跨浏览器兼容性问题。 - Engineer

@工程师，这是可能的。我正在使用Chrome浏览器。 - Kyeotic

@MinaGabriel 如果 inner(Width|Height) 在Chrome上有效，这并不意味着它在所有浏览器上都有效。 - Engineer

Answer 2

试试这个：

$(window).resize(function(){
   var newwidth = $(window).width();
   var newheight = $(window).height();      
   $("#element").css({"height": newheight, "width": newwidth });
});

- Ram

Answer 3

在纯Javascript中，您可以这样做：

    var viewportwidth;
    var viewportheight;

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

    if (typeof window.innerWidth != 'undefined')
    {
        viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
    {
         viewportwidth = document.documentElement.clientWidth,
         viewportheight = document.documentElement.clientHeight
    }

    // older versions of IE

    else
    {
         viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
         viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }
    var mydiv = document.getElementById("element");
    mydiv.style.height=viewportheight'px';
    mydiv.style.width=viewportwidth+'px';

- Paco Valdez

Answer 4

jsFiddle

 $(window).resize(function(){
var newwidth = $(window).width();
var newheight = $(window).height();      
$("#element").height(newheight).width(newwidth);
  });​

对我来说两者都可以使用

更新

 $(window).resize(function(){
var newwidth = $(window).innerWidth();
var newheight = $(window).innerHeight();      
$("#element").height(newheight).width(newwidth);
  });​

- Mina Gabriel

Answer 5

你可以随时使用CSS：

#element {width:100%; height:100%; position:fixed; }

- Control Freak

---

downvote？这段代码与Op的代码执行相同的操作，只是没有使用jQuery。 - Control Freak