Now that [almost] everything is based on rems, the navigator seems to have some funky height properties. First, the height of the navigation bar is variable, while the padding is static 8px above and below.
As a result of the pseudo-dynamic nature of navigation, just setting the top layer of the body to 50 pixels no longer works. If the user changes his font size, the strip height will no longer be 50 pixels.
Has anyone understood how to give the body the appropriate number of indents so that it is under the navigation bar when scrolling at the top of the page?
It seems to regress if you need to use jQuery for this, but maybe this is the only way.
Code example:
body {
padding-top: 54px;
background-color: blue;
}
div.container-fluid {
background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar" class="navbar navbar-fixed-top navbar-dark bg-inverse container">
<a href="www.google.com" class="navbar-brand">google.com</a>
</nav>
<div class="container-fluid">
<p>I am content that is getting overlapped by the navbar!</p>
</div>
, , . Mac OS X + +
EDIT: 4 github. , , .