jquery를 사용하여 div의 높이를 동적으로 설정하는 방법은 무엇입니까?

Question

여기 내 코드가 있지만 작동하지 않습니다. div는 항상 페이지의 맨 위로 이동합니다. 페이지 중앙에 위치 시키길 원합니다.

HTML :

<div id="overlay">Stuff</div> 

JQuery와 : 내가 잘못

$(document).ready(function(){ 
    var height = $('#overlay').height(); 
    var marginTop = (height)/2; 
    document.getElementById("overlay").style.marginTop="-"+marginTop+"px"; 
    document.getElementById("overlay").style.top="50%"; 
}); 

을 뭐하는 거지?

Answer 1

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

function resize() 
{ 
    var height = $('#overlay').height(); 
    $('#overlay').css('margin-top', (($(window).height() - height)/2) + 'px'); 
} 

창 높이에서 오버레이 높이를 뺀 값으로 설정하십시오. 그런 다음 2로 나누면 원하는 마진이 생깁니다.