Adding margin to the top and not affecting the height of container

Question

Because of my navbar, I have to add margin whose height is same as the navbar's height. However, I get a scroll bar when I add margin because the height of body, html, and container is set to 100%. How do I add margin for the navbar, and not get the unnecessary scroll bar? And why doesn't margin-bottom: -42px; work?

body, html {
    height: 100%;
}

.navbar {
    z-index: 10;
}

.container-fluid {
    height: 100%;
    margin-top: 42px;
    // add margin from the nav bar
}

Answer 1

Try this .container-fluid { height: 100%; position:absolute; top:42px; } Absolute element remove out of dom and placed exactly at position specified by you

Answer 2

.container-fluid { overflow: hidden; }

This should hide the scrollbar