How to calculate the size of a div header to do the right space?

Question

Hello,

I have a site with a Fixed menu at the top which I put the header class, and it accompanies the scroll bar, I know that my other div with the content class needs a margin according to the header height to not be capped. My doubt is how I do it flexibly. Whatever the header height the div contain margin is changed without me having to change the margin every time.

html {
  background-color: #bcbcbc;
}

.header {
  background-color: white;
  height: 100px;
  top: 0;
  left: 0;
  width: 100%;
  position: fixed;
}

.header h2{
     text-align: center;
}

.content{
  height: 100%;
  
}
.footer {
  background-color: black;
  height: 100px;
  width: 100%;

}

<div class="header">	
  <h2>FIXED</h2>
</div>
  
<div class="content">	
  <h1>Conteudo</h1>
  <h1>Conteudo</h1>
  <h1>Conteudo</h1>
  <h1>Conteudo</h1>
  <h1>Conteudo</h1>
  <h1>Conteudo</h1>

</div>
<div class="footer">
</div>

Answer 1

You can replace the position:fixed for position:sticky you can read more about here: https://css-tricks.com/position-sticky-2/

As Jorge said in the comment according to the site Can I Use this property does not work in IE https://caniuse.com/#feat=css-Sticky But keep in mind that Windows 10 which is the current default browser is Edge not IE, and from now on IE only tends to disappear, and may not even come in the next versions of Windows...

See how the result looks, I put a transparency at the top just so you see that there is nothing underneath...

html {
    background-color: #bcbcbc;
}

body {
    margin: 0;
}

.header {
    background-color: rgba(255, 255, 255, 0.5);
    height: 100px;
    top: 0;
    left: 0;
    width: 100%;
    position: sticky;
}

.header h2 {
    text-align: center;
    margin: 0;
}

.content {
    height: 100%;

}

.footer {
    background-color: black;
    height: 100px;
    width: 100%;

}

<div class="header">
    <h2>FIXED</h2>
</div>

<div class="content">
    <h1>Conteudo</h1>
    <h1>Conteudo</h1>
    <h1>Conteudo</h1>
    <h1>Conteudo</h1>
    <h1>Conteudo</h1>
    <h1>Conteudo</h1>

</div>
<div class="footer">
</div>