这是一个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());
有什么建议么?提前致谢 :)