JQuery: динамическая высота () с изменением размера окна ()

У меня проблема, идентичная этому плакату: Проблема JQuery с height () и resize ( )

Но решение не решило мою проблему. У меня есть три уложенных друг на друга div, и я хочу использовать JQuery, чтобы средний отрегулировать по высоте до 100% высоты окна за вычетом высоты (23px * 2) других верхних и нижних div. Он работает с изменением размера, но при первоначальной загрузке документа он выключен (короткий) на 16 пикселей.

HTML

top

    help me. seriously.

bottom

CSS

html,
body {
    width:100%;
    height:100%;
}

.bg {
width:315px;
height:23px;
margin:0 auto;
text-indent:-9000px;
}

#bg1 {background:url(../images/bg1.png) 0 50% no-repeat;}
#bg2 {background:url(../images/bg2.png) 0 50% no-repeat;}

#content {
width:450px; 
margin:0 auto;
text-align: center;
}

JQuery

$(document).ready(function(){
    resizeContent();

    $(window).resize(function() {
        resizeContent();
    });
});

function resizeContent() {
    $height = $(window).height() - 46;
    $('body div#content').height($height);
}