jquery - 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で割ると、希望のマージンが得られます。