14

I need to keep a footer on bottom, but its height is variable so main solutions are not suitable for me...

Examples of what I can't do:

Anyone have a solution for flexible footers?

TylerH
  • 19,065
  • 49
  • 65
  • 86
diegoiglesias
  • 303
  • 1
  • 2
  • 12

3 Answers3

26

2014 UPDATE: The modern way to solve this layout problem is to use the flexbox CSS model. It's supported by all major browsers and IE11+.

Here's a solution for sticky footer of flexible height using divs with display: table-row:

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  display: table;
  height: 100%;
  width: 100%;
  background: yellow;
}
.content {
  display: table-row;
  /* height is dynamic, and will expand... */
  height: 100%;
  /* ...as content is added (won't scroll) */
  background: turquoise;
}
.footer {
  display: table-row;
  background: lightgray;
}
<div class="wrapper">
  <div class="content">
    <h2>Content</h2>
  </div>
  <div class="footer">
    <h3>Sticky footer</h3>
    <p>Footer of variable height</p>
  </div>
</div>

What needs to be noted is that CSS was designed to layout documents, not web application screens. The CSS display: table properties are very valid though, and are supported in all major browsers. This is not the same as using structural tables for layout.

Community
  • 1
  • 1
Dan Dascalescu
  • 110,650
  • 40
  • 276
  • 363
  • 1
    +1, this is really cool. Do you know of any drawbacks to this approach? How do you think it will hold up on mobile? – Dominic P Mar 19 '13 at 02:59
  • 1
    This is brilliant -- thank you! It didn't quite fit my needs, however, which was for a variable-height sticky footer and a content area that *would* scroll. I discovered I could do that by omitting "display:table-row" on the content, and setting "overflow-y:scroll". On the footer, I then changed it to "display:table-footer-group". This has caused things to work exactly as desired! – nkoren May 25 '14 at 10:41
  • 1
    You should add `table-layout: fixed;` to class wrapper. Without that I had some width issues in IE. The content was overflowing regardless of the maximum width. – Philipp Michael Jul 01 '15 at 14:56
  • Just to note: Samsung phone browsers use a very old version of chrome and using flexbox to push down the footer results in it floating across the middle of the screen (early 2017) – Robert Went Apr 30 '17 at 04:25
  • `table-layout: fixed;` also fixed an issue with Firefox 53. – gavsiu May 20 '17 at 19:15
  • This solution doesn't work if page is higher than browser width? It just doesn't display anything that overflows the screen: main content or footer. – Marko Avlijaš May 30 '17 at 09:05
-1

I think I understand what you what.

You need to remove the height css and replace it with padding-top and padding bottom if you still what spacing..

For e.g.

#footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   background: #6CF;
   padding-top: 20px;
   padding-bottom: 20px;
 }
David Allen
  • 1,075
  • 1
  • 10
  • 20
-3
#wrapper, #content, #footer {
  width:100%;
  height:100%;
  position: relative;
}


<div id="wrapper">
  <div id="content"></div>
  <div id="footer"></div>
</div>
Anna Billstrom
  • 2,394
  • 22
  • 32