使用Jquery将内容保持在固定标题下方

Question

这是JS fiddle孤立我的问题

我有一个带浮动内容的固定标题，它定义了宽度和高度，随着窗口变小，它会增加标题的大小。

我需要的是“class-bump”类的div始终与标题的高度相同，以便#header下面的内容与#header的底部齐平。

现在，每当刷新页面时，我都会这样做.page-bump得到一个分配给它的高度，等于标题，太棒了！但是，它不会随着窗口调整大小而更新。 代码如下：

HTML

<div id="header">
<div class="thing1"></div>
<div class="thing2"></div>
</div>
<div class="page-bump"></div>

CSS

#header {
background-color:#0000FF;
width:100%;
position:fixed;
}
.thing1 {
float:left;
background-color:#a7a7a7;
width:300px;
height:50px;
}
.thing2 {
float:left;
background-color:#f2f2f2;
width:300px;
height:50px;
}

使用Javascript / Jquery的

var pageBump = function () {
var headerHeight = $('#header').height();
$('.page-bump').css('height',headerHeight);
};
$(window).resize(pageBump());

有什么建议吗？在此先感谢：）