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

Question

这是一个JS fiddle隔离我的问题

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

我需要的是具有“page-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());

有什么建议么？提前致谢 ：）