Vertically stretch div

Question

I have 3 div elements

< div id="header">FIXED CONTENT< /div >
< div id="content">DYNAMIC CONTENT< /div >
< div id="footer">FIXED CONTENT< /div >

How can make it so, that the header stays at top, the footer at the bottom & the content div to stretch vertically & fill the gap between header & footer. I hope the question is clear.

Answer 1

With pure CSS:

#header {
  height: 100px;
}

#content {
  height: 100%;
  margin: 100px 0;
}

#footer {
  position: absolute;
  bottom: 0;
  height: 100px;
}