动态调整窗口大小为jquery的元素的大小

我已经看了很多关于这个主题的问题，似乎无法找出我的代码出了什么问题。任何帮助将不胜感激！动态调整窗口大小为jquery的元素的大小

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

我试图调整#element到窗口的大小相同的高度和宽度作为窗口的大小。

来源

2012-07-06 d-_-b

这对我的作品。 – Tyrsius 2012-07-06 17:42:28

看到这个小提琴：http://jsfiddle.net/aBHRp/1/ – Tyrsius 2012-07-06 17:45:34

帮助我，http://stackoverflow.com/questions/33360273/window-disptachevent-resizing-issue – 2015-10-27 06:24:47

.innerWidth()关于从docs：

这种方法并不适用于窗口和文档对象;对于这些，请使用.width（）代替。

.innerHeight()也有相同的note。

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

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

来源

2012-07-06 17:41:07 Engineer

感谢您的答复。这很有趣，因为如果我提醒（新宽度），我会得到正确的宽度。 – 2012-07-06 17:41:55

宽度和innerWidth都适用于我。 – Tyrsius 2012-07-06 17:42:46

@Tyrsius也许存在跨浏览器兼容性问题。 – Engineer 2012-07-06 17:45:55

试试这个：

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

来源

2012-07-06 17:41:30 undefined

谢谢你，这是另一种现在为我工作的方式！ – 2012-07-06 17:51:35

@iight欢迎:) – undefined 2012-07-06 17:53:58

你总是可以只使用CSS：

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

来源

2012-07-06 17:43:40

downvote？除了没有jQuery之外，这与Op在代码中的作用相同。 – 2012-07-06 17:46:53

在普通的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';

来源

2012-07-06 17:44:30

jsFiddle

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

两部作品对我来说

update

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

来源

2012-07-06 17:47:42

动态调整窗口大小为jquery的元素的大小

回答

相关问题