jQuery .height()不使用box-sizing:border-border

时间:2014-12-06 00:18:22

标签: javascript jquery html css css3

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

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

http://jsbin.com/qomepe/2

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

2 个答案:

答案 0 :(得分:3)

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

来自jQuery API docs:

"顶部和底部填充和边框始终包含在.outerHeight()计算中;如果includeMargin参数设置为true,则还包括边距(顶部和底部)。"

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

答案 1 :(得分:1)

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

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

尝试这样的事情