Container after fixed navbar with dynamic height

Question

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 or some other formatting?

Answer 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';

Answer 2

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.

Answer 3

Do you mean somthing like that?

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

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