Why doesn't my sticky footer stick?

后端未结

关注

 7  643

I\'ve browsed to all question related to \"sticky footer\" and nothing helped me because my #content div does not always have sufficient content to push the footer to the bo

相关标签:

7条回答

忘掉有多难

2021-01-14 20:23

Try moving your footer div outside of the container div. Your technique should then work. The way you have it set at the moment the footer is within the containing div, but positioned relatively. So even though the containing div may have 100% height, the footer div within it is still only to go just below the content in the container.

A quick example of what I mean, (note that an extra 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: #ffffd;
        }

        #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>

If you can't move the footer outside of the container (for whatever reason), then you could also try positioning the footer absolutely within the containing div to be at the bottom. position: absolute; bottom: 0px; etc

For example, (again, an extra 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 2</title>

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

        * { 
            margin: 0px;
        }

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

        #footer {
            position: absolute;
            bottom: 0px;
            width: 100%;
            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 id="footer">
            <p>Hello! I'm a footer!</p>
        </div>
    </div>
</body>
</html>

0 讨论(0)

上一页 1 2