CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Justin Hathaway
Justin Hathaway

Reputation: 239

jQuery .height() not working with box-sizing: border-border

I have a nav bar that I have positioned 'fixed' at the top of my page. The problem that I have is that I want to displace the entire page down by the (dynamic) size of my nav depending on the size of the screen used. Basically, I want to move the whole page down the height of this nav. To do this, I'm going to be using a padding to the nav that will affect it's height. I am using a box-sizing:border-box attribute on this nav but whenever I try and load the page, it doesn't account for the extra height added with the padding when I use jQuery's .height() function.

The div with the 'displacement' class does not have anything to it except a 100% width initially. This is the ugly result along with all of the current code

http://jsbin.com/qomepe/2

Can anyone tell me why this is happening or if I've overlooked something?

Upvotes: 0

Views: 1953

Answers (2)

Darko
Darko

Reputation: 930

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

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

Try something like this

Upvotes: 1

Will
Will

Reputation: 1299

Try using .outerHeight() to get the height of the navbar.

From jQuery API docs:

"The top and bottom padding and border are always included in the .outerHeight() calculation; if the includeMargin argument is set to true, the margin (top and bottom) is also included."

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

Upvotes: 3

Related Questions