Динамический размер элемента с размером окна 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

Посмотрите эту скрипку: http://jsfiddle.net/aBHRp/1/ – Tyrsius

Помогите мне, http://stackoverflow.com/questions/33360273/window-disptachevent-resizing-issue –

О .innerWidth(), из docs:

Этот метод не применим для оконных и документов объектов; для их, используйте .width().

Существует такой же note для .innerHeight() также.

Таким образом, вы должны использовать .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

спасибо за ответ. Это интересно, потому что если я предупреждаю (newwidth), я получаю правильную ширину. –

И ширина, и внутренняя ширина работают для меня. – Tyrsius

@Tyrsius Возможно, проблема кросс-браузерной совместимости. – Engineer

попробовать это:

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

источник

2012-07-06 17:41:30 undefined

спасибо, это еще один способ, который теперь работал на меня! –

@iight добро пожаловать :) – undefined

Вы всегда можете просто использовать CSS:

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

источник

2012-07-06 17:43:40

downvote? это делает то же самое, что и Op в своем коде, за исключением без jQuery. –

Попросту 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

ответ

Смежные вопросы