height not calculated correctly with box-sizing: border-box; and height set

[morrow95]

By default bootstrap has box-sizing: border-box; set in the css for anything with a height specified. So, if my navbar starts off with something like :

<header id="header" class="navbar navbar-fixed-top">

and in my css I set a height :

#header {
   height:66px;
   border-bottom:1px solid #000;
   ...
}

the incorrect top position is set in the html when the navbar is hidden :

style="top: -65px;"

when that value should be -66px. The result is the bottom border is shown at the top of the page when the navbar is hidden from view. I'm not sure if this is a fault of the browser or what, but somewhere the calculated height is wrong due to the 1px border and box-sizing: border-box set in the css.

For now I am doing a quick fix, specific to my case, to solve the issue by changing line 43 :

top: -autoHidingNavbar.element.height() - 1

by subtracting an additional 1px to take into account my 1px border set. I haven't done much research into anything else, but I would think there would be a way to properly calculate this dynamically.

[istvan-ujjmeszaros]

Thanks for reporting it @morrow95!

[morrow95]

Yep, the changes work fine. Thanks for the quick response.