ansaurus

Question

Help with a bottombar

Answer 1

+5 A:

Have you looked at http://www.cssstickyfooter.com/

Joe R 2010-01-04 11:34:45

+1 for the much better answer. I've withdrawn mine.

Carl Smotricz 2010-01-04 11:37:53

Thanks Joe, this seems to be exactly what im looking for.Im having some problems implementing it though. But thanks for the point in the right direction

Thorbjørn Reimann-Andersen 2010-01-04 13:30:26

Got it. Thanks.

Thorbjørn Reimann-Andersen 2010-01-04 15:11:34

Answer 2

A:

Assuming the height of the bottom bar is fixed it's fairly simple. eg.:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;
    <style type="text/css">
        html, body { height: 100%; margin: 0; padding: 0; }
        #content { min-height: 100%; }
        * html #content { height: 100%; } /* IE6 hack */
        #trailer { height: 2em; margin-top: -2em; background: yellow; }
        #pad { height: 2em; }
    </style>
</head><body>
    <div id="content">
        Content content content content content content content content content content content.
        <div id="pad"></div>
    </div>
    <div id="trailer">
        Bit at the bottom.
    </div>
</body></html>

bobince 2010-01-04 11:44:57

Answer 3

A:

Investigate the css property "position: fixed" and see if it works for you:

<div id="footer" style="position: fixed; bottom: 0; width: 100%; height: 30px; line-height: 30px; background-color: #FFCC00;">
  This div stays at the bottom of the window, even when the user scrolls the page.
</div>

Salman A 2010-01-04 11:48:54

No. This "solution" doesn't address the second part of the question, namely that the footer has to move down when content becomes larger than will fit on the screen.

Carl Smotricz 2010-01-04 13:41:41

Answer 4

A:

Something like this will do the trick, (note that the extra wrapping div with some padding-bottom is required in order to make sure the footer does not overlap the contents),

<html>
<head>
    <title>Sticky Footer Test</title>

    <style>
        html, body {
            height: 100%;
            padding: 0px;
            margin: 0px;
        }

        * { 
            margin: 0px;
        }

        #container {
            min-height: 100%;
            height: auto !important;
            height/**/: 100%; /* for IE6 */
            background: #ddd;
        }

        #footer {
            position: relative;
            background: #555;
            margin-top: -100px;
            height: 100px;
        }

        #content {
            padding-bottom: 100px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            <p>Hello! I'm some content!</p>
        </div>
    </div>
    <div id="footer">
        <p>Hello! I'm a footer!</p>
    </div>
</body>
</html>

Rich Adams 2010-01-04 11:52:40

ansaurus

tags:

views:

answers:

Help with a bottombar

related questions