jQuery .height（）不使用box-sizing：border-border

Question

我有一个导航栏，我已将其定位在页面顶部。我遇到的问题是，我希望根据所用屏幕的大小，将导航整个页面取下导航器的（动态）大小。基本上，我想将整个页面移动到此导航的高度。要做到这一点，我将使用填充到导航将影响它的高度。我在这个导航器上使用了box-sizing：border-box属性，但每当我尝试加载页面时，它都没有考虑使用jQuery的.height（）函数时添加填充的额外高度。

具有'displacement'类的div除了最初的100％宽度之外没有任何东西。这是所有当前代码的丑陋结果

http://jsbin.com/qomepe/2

有谁能告诉我为什么会这样或者我忽略了什么？

Answer 1

尝试使用.outerHeight（）来获取导航栏的高度。

来自jQuery API docs：

＆＃34;顶部和底部填充和边框始终包含在.outerHeight（）计算中;如果includeMargin参数设置为true，则还包括边距（顶部和底部）。＆＃34;

http://api.jquery.com/outerheight/

Answer 2

var height = $('header').outerHeight();

$('.displacement').css('height',height);

尝试这样的事情