Sticky footer with a variable height

Question

I know there is a lot of same topics, but is there any CSS way to stick bottom a footer with an height in % without overflowing the body and the header because of absolute position ?

I'm trying to stick this one :

html,body{
    height: 100%;
}

#header{
    background-color: yellow;
    height: 100px;
    width: 100%;
}

#holder {
    min-height: 100%;
    position:relative;
}

#body {
    padding-bottom: 100px;
}

#footer{
    background-color: lime;
    bottom: 0;
    height: 100%;
    left: 0;
    position: relative;
    right: 0;
}

with html :

<div id="holder">
    <div id="header">Title</div>
    <div id="body">Body</div>
    <div id="footer">Footer</div>
</div>

Code here : http://jsfiddle.net/TsRkB/

Thanks !

http://stackoverflow.com/questions/10825879/how-can-a-variable-height-sticky-footer-be-defined-in-pure-css — Pevara, Jul 10 '13 at 22:55

score 3 · Accepted Answer · answered Jul 10 '13 at 23:38

3

if you use display:table as a base , then your sticky footer can be any size and will be pushed down if content grows.

http://dabblet.com/gist/5971212

html {
    height:100%;
    width:100%;
    }
body {
    height:100%;
    width:100%;
    display:table;
    table-layout:fixed;
    margin:0 auto;
    width:80%;
    }
.tr {
    display:table-row;
    background:turquoise
    }
section.tr {
    height:100%;
    background:yellow
    }

for

<header class="tr"> <h1>title</h1><p>make me grow</p></header>
<section class="tr"><article>article</article></section>
<footer class="tr"> <p>Footer</p><p>make me grow</p></footer>

answered Jul 10 '13 at 23:38

G-Cyrillus

85,910
13
85
110

Thanks ! That's perfect – Herondil Aug 15 '13 at 18:55
Could you explain why this works? I can't understand how the section in the middle can have 100% height while the other two table-row display footer and header are not zero in height... – matteo Jan 24 '14 at 15:48
since we use display:table and height : 100%; this height will be strecthcing elements if there is not enough content to fill them. if you set one of them to 100%; it will take the maximum height avalaible when others will shrink on their content. Once there is more than 100% height of content, the whole container will grow but will never be less than 100% height. jut like
– G-Cyrillus Jan 24 '14 at 16:04
Without `table-layout: fixed;` I had some width issues in IE. The content was overflowing. – Philipp Michael Jul 01 '15 at 14:52

score 1 · Answer 2 · answered Oct 25 '14 at 00:12

All the other solutions are out of date and have a major shortcoming: they don't work if the height of the footer is variable or unknown.

With the advent of the CSS flex model, solving this problem become very, very easy: while mostly known for laying out content in the horizontal direction, Flexbox actually works just as well for vertical layout problems. All you have to do is wrap the vertical sections in a flex container and choose which ones you want to expand. They'll automatically take up all the available space in their container.

Note how simple the markup and the CSS are. No table hacks or anything.

The flex model is supported by all major browsers as well as allegedly IE11+, though my IE doesn't render this snippet correctly yet.

html, body {
  height: 100%;
}

#header {
  background: yellow;
  height: 100px;  /* can be variable as well */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#body {
  flex: 1;
  border: 1px solid orange;
}

#footer{
  background: lime;
}

<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">Body</div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

score -2 · Answer 3 · answered Jul 10 '13 at 22:53

-2

Fixed it for you, basically have to put the footer outside the wrapper and move it up... http://jsfiddle.net/sMdmk/4/

#footer{
background-color: lime;
bottom: 0;
height: 10%;
left: 0;
position: relative;
right: 0;
top: -10%;
}

answered Jul 10 '13 at 22:53

dave

50,635
4
62
77

Sticky footer with a variable height

3 Answers3

Linked