61

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Jeremy
  • 44,950
  • 68
  • 206
  • 332

8 Answers8

40

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;
}
Reggie Pinkham
  • 11,985
  • 4
  • 38
  • 36
  • I have change the answer. Yes, the original answer is outdated. – Jeremy Jul 19 '18 at 22:53
  • 1
    For Angular (tested in version 7) apps, use `html, body, app-root, ` and `body, app-root, ` instead of the first two style. It works for me. – holydragon Feb 11 '19 at 08:49
35

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>
Jeremy
  • 44,950
  • 68
  • 206
  • 332
  • This is better than the famous http://matthewjamestaylor.com/blog/perfect-3-column.htm because the `` color doesn't show through. – Dan Dascalescu Aug 17 '12 at 09:43
  • great answer. please explain why you have used "vertical-align:bottom;" in divContent ? is it required ? – Shahrokhian Jul 05 '13 at 20:28
  • @RezaSh - It was a long time ago that I came up with this pattern, so I do not recall why the need for "vertical-align:bottom" in divContent. I tested it by removing that style using jsfiddle and everything still seemed to work, so perhaps that was a needless style. – Jeremy Sep 17 '13 at 15:36
  • This answer seems to outdated. Please check the fiddle posted in first comment! – Basavaraj Metri Nov 03 '16 at 04:13
  • Work fine, simple and clean +1, i suggest "0px to -100px – Leonardo Ciaccio Jul 13 '18 at 16:32
8

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.

Traingamer
  • 1,438
  • 8
  • 9
4

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%;
}
Allen
  • 2,717
  • 2
  • 30
  • 34
1

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>
Sumit Yadav
  • 97
  • 1
  • 11
0

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

vishal patel
  • 125
  • 1
  • 7
-4

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

height: 100%;

Mitchel Sellers
  • 62,228
  • 14
  • 110
  • 173
  • 2
    I found that if you have 3 divs, for example:
    ...
    and you make the content div 100% height, it will size the the height of the page, but waht I want is for it to size to the height of the page minus the other divs     – Jeremy Oct 15 '08 at 22:09
-9
#footer {
 clear: both;
}
Andy Brudtkuhl
  • 3,652
  • 3
  • 27
  • 31