min-height not working on the body

Question

I'm having some issues with min-height: 100%

I want the footer always below my content. Meaning, if the content is longer than the screen height, you don't see the footer, until you've scrolled all the way to the bottom

Also, when the content is shorter than the screen height, the footer needs to be at the bottom of the screen. Well, I thought I solved this just by adding min-height: 100%

<html>
    <head>
        <style>
            html, body, main { min-height: 100% }
        </style>
    </head>
    <body>
        <main>
            <article> .... </article>
            <footer> ... </footer>
        </main>
    </body>
</htm>

DEMO

Now, for some reason the body tag seems to ignore this setting and its height simply fits the content.

Unfortunately, you can't just set the body to 100% ( DEMO )

Any suggestions how to fix this ?

Possible duplicate of [CSS: get div to take up 100% body height, minus fixed-height header and footer?](http://stackoverflow.com/questions/15021573/css-get-div-to-take-up-100-body-height-minus-fixed-height-header-and-footer) or http://stackoverflow.com/questions/23651942/css-single-column-layout-centered-fixed-width-100-height-w-header-and-footer/23657083#23657083 for newer answer — Pete, Dec 07 '15 at 13:50
The accepted answer will not work in IE10 and lower... http://www.w3schools.com/cssref/css3_pr_flex.asp — Legionar, Dec 07 '15 at 15:02
But I must add that I still don't understand why my demo doesn't work as expected — Jeanluca Scaljeri, Dec 07 '15 at 16:40

Slavenko Miljic · Answer 1 · 2015-12-07T13:50:56.660

4

Sticky footer 'hack' is usually done with the min-height and negative margin-bottom on the footer parent element. All parent elements up until root html, need to have height:100%;

article{
  //height: calc(100% - 50px);
  min-height: 100%;
  background: yellow;
  padding-bottom: 50px;
  margin-bottom:-50px;
}

JSFIDDLE LONG CONTENT

JSFIDDLE SHORT CONTENT

edited Dec 07 '15 at 13:50

answered Dec 07 '15 at 13:43

Slavenko Miljic

3,836
2
23
36

Legionar · Answer 2 · 2015-12-07T13:37:55.820

The fantastic CSS Tricks website has, in their Snippets area a snippet for a Sticky Footer:

http://css-tricks.com/snippets/css/sticky-footer/

Or using jQuery:

http://css-tricks.com/snippets/jquery/jquery-sticky-footer/

latest link with demo

Or you can simply use Modern Clean CSS “Sticky Footer” from James Dean

So just change your HTML and CSS to this:

HTML

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <main>
        <article> .... </article>
    </main>
    <footer> ... </footer>
</body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 100px; /* bottom = footer height */
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Demo here

score 2 · Accepted Answer · answered Dec 07 '15 at 13:57

2

You can use display:flex for this:

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

main {
  min-height:100%;
  display: flex;
  flex-direction: column;
  background:blue;
}

article {
  flex-grow: 1;
  background:green;
}

footer {
  background:orange;
}

<main>
  <article>... </article>
  <footer> ... </footer>
</main>

answered Dec 07 '15 at 13:57

Pete

57,112
28
117
166

This will not work in IE10 and lower... http://www.w3schools.com/cssref/css3_pr_flex.asp – Legionar Dec 07 '15 at 15:02
@Legionar should work in ie10 - may need vendor prefixes though: http://caniuse.com/#search=flex Also no need for the downvote - the question doesn't stipulate which browser this needs to work for and as far as I can see, mine is the only one that allows for a variable height footer. Besides, if you need it to work in ie9 or lower, I have given a couple of links in the comments that have answers that will work in ie9 and lower – Pete Dec 07 '15 at 15:56
So just please add that prefixes, and I will agree with you. Thanks. – Legionar Dec 07 '15 at 21:44

score 1 · Answer 4 · answered Dec 07 '15 at 13:33

I modified your css to put the footer and the article in a relative position:

* {
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}

article {
  height: calc(100% - 50px);
  position: relative;
}

main {
  background-color:lightgray;
}
footer {
  background-color: green;
  height: 50px;
  position: relative;
  bottom: 0;
  width: 100%;
}

the fiddle: http://jsfiddle.net/np9n4ckb/5/

score 1 · Answer 5 · answered Dec 07 '15 at 13:35

If you don't want to mess with positioning, you can use vh units. 1vh equals 1% of the viewport's height.

(For reference, this is a good read: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/)

Fiddle: http://jsfiddle.net/np9n4ckb/6/

CSS

* {
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}

html, body {
  min-height: 100vh; /* Minimum height is the full viewport */
}

article {
  min-height: calc(100vh - 50px); /* Minimum height is the viewport height minus the footer */
}

main {
  background-color:lightgray;
}

footer {
  background-color: green;
  height: 50px;
}

score 1 · Answer 6 · answered Dec 07 '15 at 13:52

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* browser reset */

html {
  height: 100%;
  position: relative;
  min-height: 100%: padding-bottom: 50px;
  /* equal to footer height */
}
body {
  height: 100%;
  color: #fff;
}
footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: #ccc;
}
header {
  background: #333;
}
main {
  background: tomato;
}

<html>

<body>
  <header>Menu</header>
  <main>content of unknown height!!</main>
  <footer>footer always stays at bottom</footer>

</body>

</html>

This is just what you need to do.

min-height not working on the body

6 Answers6