CODEWITHSUNDEEP
css
Vishal Shah
Vishal Shah

Reputation: 4124

Vertically stretch div

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.

Upvotes: 2

Views: 3167

Answers (1)

scragz
scragz

Reputation: 6690

With pure CSS:

#header {
  height: 100px;
}

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

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

Upvotes: 2

Related Questions