Search code examples
htmlcsslayoutfooter

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.

Solution

  • 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; }