Container After Fixed Navbar With Dynamic Height

I have a header with a dynamic height (min-height: 50px). Of course, it can be higher than 50px. I want a container with some content right below it. Can I do that with a margin

Solution 1:

get the header height and assign margin top to content div using js.

var height = document.getElementById("head").offsetHeight;
document.getElementById("content").style.marginTop = height + 'px';

Solution 2:

Do you mean somthing like that?

body {
  height: 500px;
  background-image: linear-gradient(to bottom, #eee0%, #000011100%);
}
.header-container {
  position: fixed;
  width: 100%;
  top: 0px;
  left: 0px;
}
.header {
  min-height: 50px;
  padding: 15px;
  background-color: #72f072;
}
.header-container.headerp,
.header-container.somethingp {
  margin: 0px;
}
.header-container.something {
  padding: 15px;
  background-color: #fff;
}

<divclass="header-container"><divclass="header"><p>some content</p></div><divclass="something"><p>some other content</p></div></div>

Solution 3:

You should give to the container a margin-top equal to the fixed navbar height. But as the navbar height may need to grow, I usually change the height and the container margin, as needed, with media queries.