使用窗口大小jquery动态调整元素大小

我已经看过很多关于这个主题的问题，似乎无法找出我的代码有什么问题。 任何帮助将不胜感激！

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

我正在尝试将#element的大小调整为与窗口大小相同的高度和宽度。

Answer 1

关于.innerWidth() ，来自docs ：

此方法不适用于窗口和文档对象; 对于这些，请改用.width（）。

.innerHeight()也有相同的注释 。

所以你需要使用.width()和.height() ：

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

Answer 2

试试这个：

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

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 (ie 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'; 

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); });​ 

Answer 5

你总是可以使用CSS：

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