Home/ Questions/Q 8678509
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T20:44:23+00:00

Code: <html> <body> <div id=header> </div> <div idcontent> Some random content </div> <div id=footer>

  • 0

Code: 

<html>
    <body>
        <div id="header">
        </div>
        <div id"content">
            Some random content
        </div>
        <div id="footer>
        </div>
    </body>
</html>

CSS:

html {
    height: 100%;
}
body {
    width:960px;
    height: 100%;
    margin: 0 auto;
}
#header {
    height: 100px;
}
#content {
    min-height: 100%;
}
#footer {
    height: 100px;
    position: relative;
    bottom: 0;
}

Problem:
For what I have been reading, this code should do the height of the content div take all the height of the window even if the content it’s smaller. The problem is that it makes it take more than the window height, even with a very small content.

I don’t understand how the content can take more than 100% height and how can I fix it.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s working fine, you’re misunderstanding how it should work. You have header and footer set to 100px so the site is actually adding 200px to the entire page.

    If that is a copy and paste you have html errors too, your content div is missing an= sign and the footer div is missing the closing “

    What you want is a wrapper and position fixed on the footer not relative.

    http://jsfiddle.net/calder12/ghDUd/1/

    • 0