jQuery 브라우저 창 크기가 바뀌더라도 요소 너비를 알아 낸다.

Question

컨테이너의 너비를 알아 내고 자식 요소에 특정 크기 (사이드 바 크기 빼기)를 알려주는 jQuery 코드가있다. 화면을 채우십시오.

사용자가 브라우저 창을 업데이트하지 않는 경우를 제외하고는 잘 작동합니다! 따라서 실시간으로 작업하려면 jQuery 코드가 필요합니다. 누구든지 도와 줄 수 있습니까? 감사합니다

$(document).ready(function() { 

    // find out the width of the page 
    var pageWidth = $('div.MainContentHolder').width(); 
    // minus the sidebar and margin width 
    var middleWidth = pageWidth - '220'; 
    // apply the new width to the middle column 
    $('div.MiddleColumn').css('width', middleWidth); 

}); 

Answer 1

이동을 별도의 함수에 코드와는 document ready 및 window resize 이벤트를 모두 실행이 있습니다.

function resizeElements() { 
    // find out the width of the page 
    var pageWidth = $('div.MainContentHolder').width(); 
    // minus the sidebar and margin width 
    var middleWidth = pageWidth - '220'; 
    // apply the new width to the middle column 
    $('div.MiddleColumn').css('width', middleWidth); 
} 

$(document).ready(function() { 
    resizeElements(); 
    $(window).resize(resizeElements); 
} 

Answer 2

그냥 $ (window) .resize()에 바인딩해야합니다.

$(document).ready(function() { 

    $(window).resize(function() { 
     // find out the width of the page 
     var pageWidth = $('div.MainContentHolder').width(); 
     // minus the sidebar and margin width 
     var middleWidth = pageWidth - '220'; 
     // apply the new width to the middle column 
     $('div.MiddleColumn').css('width', middleWidth); 
    }).resize(); 

});