Jquery outerHeight用于换行时固定位置导航

Question

我在网站的顶部有一个固定的位置导航。我正在使用 outerHeight 来获取导航容器的高度，然后将其作为顶部填充添加到导航下方内容的容器中。这一切都很好用，除非我缩小窗口，使导航换行到多行。在Chrome和IE中，outerHeight仍然被测量为好像行没有换行（在Firefox中工作正常）。

.JS

function contentTopMargin() {
    var topHeight = $('#topNavContainer').outerHeight(true) - 1;
    $('#container').css('padding-top', topHeight + 'px');
}
$(document).ready(function() {
    contentTopMargin();
    });
$(window).resize(function() {
    contentTopMargin();
});

.HTML

<header id="topNavContainer">
<nav id="topNav">
    <div class="current navItem"><a href="#1">item 1</a></div>
    <div class="navItem"><a href="#2">item 2</a></div>
    <div class="navItem"><a href="#3">item 3</a></div>
    <div class="navItem"><a href="#4">item 4</a></div>
    <div class="navItem"><a href="#5">item 5</a></div>
    <div class="clearDiv"></div><!-- for clearing floats -->
</nav>
</header>
<div id="container">
Some content
</div>

.CSS

#topNavContainer {
position: fixed;
width: 100%;
background: #333;
}
#topNav {
padding-top: 3.5rem;
padding-bottom: 1.5rem;
margin: 0 auto;
max-width: 1200px;
width: 90%;
border-bottom: 1px solid #b1bdbe;
}
#topNav div.navItem {
display: block;
float: left;
margin-right: 4%;
font-size: 1.4rem;
}
#container {
margin: 0 auto;
max-width: 1200px;
width: 90%;
padding-top: 7.5rem;
padding-bottom: 5rem;
}
.clearDiv {
clear: both;
}

Answer 1

调整窗口大小时调用函数

$(function() {
    $(window).on('resize', function() {
        contentTopMargin();
    });
});