Content height expand between fixed header and fixed footer

Question

I have a fixed header and a fixed footer that should always be visible in the window.

The problem: I would like to have a "main box" expand between the header and the footer. In that main box is the text box the height of that box should be relative to the distance to the header and footer. I think this picture explains better what I'm trying to archive:

The header and footer could also have a fixed height.

<div id="wrapper">
  <div id="header"></div>>
  <div id="main">
  <div id="textbox"></div>
</div>
<div id="footer"></div>

Answer 1

with html you can try with </br>

<div id="wrapper">
      <div id="header"></div>

      </br></br>

      <div id="main">
      <div id="textbox"></div>
    </div>

    </br>

    <div id="footer"></div>

Answer 2

You could add position: fixed for both and position them.

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px; /*height you want*/
    z-index: 1;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px; /*height you want*/
    z-index: 1;
}

Then you position your main box using height and padding you wish. It could be something like this:

#main {
    position: absolute;
    height: calc(100vh - x); /* "x" would be the sum of header and footer heights*/
    width: 100%;
    top: 100px; /* the height of your header*/
}
#textbox {
    margin: 30px 0 20px 0;
    width: 100%;
    height: calc(100% - 50px);
    z-index: 1;
}