Reputation: 46340

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

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.

Upvotes: 63

Answers (8)

vishal patel

Reputation: 193

HTML

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

CSS

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
    height: 10px;
  background: red;
  width: 100%;
}

footer {
    height: 10px;
  background: red;
  width: 100%;
}

This css to body will make sure that header and footer are always on top and bottom respectively.

Put all the content in main. going further you can make header or footer sticky as per your requirement.

Check the working example here https://codepen.io/vishal657/pen/MWBOErq?editors=1100

Upvotes: 0

Sumit Yadav

Reputation: 97

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>

Upvotes: 1

Allen

Reputation: 2867

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%;
}

Upvotes: 5

Reggie Pinkham

Reputation: 12708

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;
}

Upvotes: 42

Jeremy

Reputation: 46340

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>

Upvotes: 35