How to create div to fill all space between header and footer div

Css Problem Overview

I'm working on moving from using tables for layout purposes to using divs (yes, yes the great debate). I've got 3 divs, a header, content and footer. The header and footer are 50px each. How do I get the footer div to stay at the bottom of the page, and the content div to fill the space in between? I don't want to hard code the content divs height because the screen resolution can change.

Css Solutions

Solution 1 - Css

Flexbox solution

Using flex layout we can achieve this while allowing for natural height header and footer. Both the header and footer will stick to the top and bottom of the viewport respectively (much like a native mobile app) and the main content area will fill the remaining space, while any vertical overflow will be scrollable within that area.

See JS Fiddle

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

Solution 2 - Css

To summarize (and this came from the CSS Sticky Footer link provided by Traingamer), this is what I used:

html, body 
{ 
    height: 100%; 
} 

#divHeader
{
	height: 100px;
}

#divContent
{
	min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
}

#divFooter, #divPush
{
	height: 100px; /*Push must be same height as Footer */
}

<div id="divContent">
    <div id="divHeader">
        Header
    </div>
    
    Content Text
    
    <div id="divPush"></div>
</div>
<div id="divFooter">
    Footer
</div>

Solution 3 - Css

To expand on Mitchel Sellers answer, give your content div height: 100% and give it a auto margin.

For a full explanation and example, see Ryan Fait's CSS Sticky Footer.

Since you know the size (height) of your header, put it inside the content div (or use margins).

Position absolute will give you problems if your content is larger (taller) than the window.

Solution 4 - Css

A way to do this using CSS Grid:

index.html

<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="main.css" rel="stylesheet">
  </head>
  <body>
    <main>
      <header>Header</header>
      <section>Content</section>
      <footer>Footer</footer>
    </main>
  </body>
</html>

main.css

body {
    margin: 0;
}
main {
    height: 100%;
    display: grid;
    grid-template-rows: 100px auto 100px;
}
section {
    height: 100%;
}

Solution 5 - Css

Use CSS grid instead it is supported by nearly all the browser

html{
    height: 100%;
}
body{
    margin: 0;
    padding: 0;
    height: 100%;
}

.main-body{
    display: grid;
    /* let content auto to occupy remaining height and pass value in fit-content with min-height for header and footer */
    grid-template-rows: fit-content(8rem) auto fit-content(8rem);
    grid-template-areas: "header" "main" "footer";
}

.main-header{
    background-color: yellow;
    grid-area: header;
}

.main-content{
    grid-area: main;
}

.main-footer{
    background-color: green;
    grid-area: footer;
}

<body class="main-body">
    <header class="main-header">
        HEADER
    </header>
    <main class="main-content">
        this is content
    </main>
    <footer class="main-footer">
        this is footer
    </footer>
</body>

Solution 6 - Css

if you are trying to maximize the height of your content div, in the CSS add

height: 100%;

Solution 7 - Css

#footer {
 clear: both;
}

Content Type	Original Author	Original Content on Stackoverflow
Question	Jeremy	View Question on Stackoverflow
Solution 1 - Css	Reggie Pinkham	View Answer on Stackoverflow
Solution 2 - Css	Jeremy	View Answer on Stackoverflow
Solution 3 - Css	Traingamer	View Answer on Stackoverflow
Solution 4 - Css	Allen	View Answer on Stackoverflow
Solution 5 - Css	Sumit Yadav	View Answer on Stackoverflow
Solution 6 - Css	Mitchel Sellers	View Answer on Stackoverflow
Solution 7 - Css	Andy Brudtkuhl	View Answer on Stackoverflow