Create footer element located beneath the screen

问题

I have a page that does not fill the entire screen's height, but I want a footer to stay just below the screen, so that it appears right when you start scrolling - no matter the person's screen height.

How do I accomplish this using CSS?

EDIT

I have tried:

#footer{
    position:absolute;
    left:0px;
    top:100%;
}

This works, but it gets in the way if my page does go over the screen's height. I really need compatibility for both types of pages.

回答1:

Here's a simple example of the layout you describe:

HTML

<html>
<head><title>Hidden Footer</title></head>
<body>
    <div id="content">
        Content here
    </div>
    <div id="footer">
        Footer here
    </div>
</body>
</html>

CSS

html,
body { height: 100%; min-height: 100%; }

#content { min-height: 100%; }
#footer { background: #ccc; }

回答2:

html {
  min-height: 100%;
}
body {
  min-height: 100%;
  padding-bottom: 40px; /* free space for the footer */
  box-sizing: border-box; /* don't add padding to the actual height */
}
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
}