1

I have replicated Ryan Fait's sticky footer. Here is the CSS and HTML for clarity:

<body>

    <div class="wrapper">

    // Content

        <div class="push"></div>

    </div>

    <div class="footer">
        <p>Lorem ipsum</p>
    </div>

</body>

CSS:

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

As you can see, it works nicely. What I don't understand though is how the height (note: height, not min-height) is explicity set for the body and yet it still expands beyond this value to accomodate content?

I hope my question is clear...

EDIT: The second comment on this answer seems to suggest that this shouldn't happen.

Community
  • 1
  • 1
Inigo
  • 8,110
  • 18
  • 62
  • 110
  • I know that older versions of IE treat `height` as `min-height`, but my question is why doesn't this cause problems in modern browsers since the parent element (ie. body) has been told that it cannot expand larger than 100% of the screen height? – Inigo Mar 31 '15 at 15:28
  • 1
    Since body's overflow is set to auto by default, anything that 'doesn't fit' will continue on (as if the body is overflow:visible). Hence, if you set overflow:hidden on the body, the text gets cut off. – jbutler483 Mar 31 '15 at 15:51
  • Ah, I think you've cracked it. So essentially the body is not expanding at all, it's still an element whose dimensions match the size of the screen, but now has scrollable content within it. However, how do you explain the comment I referred to in my second edit? Is 'SimplGy' wrong? – Inigo Mar 31 '15 at 15:57
  • SimplGy Is perfectly correct, The 'body' is not getting longer - if you put a border-bottom on the body, you'd see that. However, that doesn't stop the content from 'flowing out of the body' [quick demo](http://jsfiddle.net/5wrhz7ys/1/) – jbutler483 Mar 31 '15 at 16:03
  • 1
    It is important to note that the body does not have 100% height in the example that SimplGy was referring to. – pschueller Mar 31 '15 at 16:04

0 Answers0