2

这是一个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());

有什么建议么?提前致谢 :)

4

0 回答 0