Tự động thay đổi kích thước phần tử với kích thước cửa sổ jquery

Question

Tôi đã xem xét nhiều câu hỏi về chủ đề này và dường như không thể tìm ra điều gì sai với mã của tôi. Mọi sự trợ giúp sẽ rất được trân trọng!

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

Tôi đang cố gắng đổi kích thướC#element thành cùng chiều cao và chiều rộng làm cửa sổ nếu cửa sổ được thay đổi kích thước.

Answer 1

Về .innerWidth(), từ docs:

Phương pháp này không áp dụng đối với cửa sổ và tài liệu đối tượng; đối với , thay vào đó hãy sử dụng .width().

Có cùng một số note cho .innerHeight().

Vì vậy, bạn cần phải sử dụng .width() và .height():

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

Answer 2

thử điều này:

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

Answer 3

Bạn luôn có thể chỉ cần sử dụng CSS:

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

Answer 4

Trong đồng bằng javascript bạn có thể làm điều này:

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

Answer 5

jsFiddle

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

cả công trình đối với tôi

update

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