Why doesn't my sticky footer stick?

后端未结

关注

 7  642

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:00

I know this doesn't answer your exact question, but the work done by Ryan Fait has worked very well for me across multiple browsers. You might want to give this a try (or take a look at what he did compared to what you are doing and see if you can determine a fix).

0 讨论(0)
发布评论:

提交评论
- 加载中...

忘了有多久

2021-01-14 20:01

It's actually easy, here's the minimum required template:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 1980857</title>
        <style>
            html, body {
                margin: 0;
                height: 100%;
            }
            #container {
                position: relative;
                min-height: 100%;
            }
            * html #container {
                height: 100%; /* This is min-height for IE6. */
            }
            #footer {
                position: absolute;
                bottom: 0;
            }
            #footer, #pushfooter {
                height: 50px; /* Both must have the same height. */
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="content">Content</div>
            <div id="pushfooter"></div>
            <div id="footer">Footer</div>
        </div>
    </body>
</html>

Making the container relative and giving it a min-height will actually stick the footer to its bottom all the time regardless of the content's actual height, which was your major concern as understood from comments.

0 讨论(0)

轻奢々

2021-01-14 20:01
In order to realize a sticky footer, that is a footer placed in a fixed position at the bottom of the webpage that doesn't move when your scroll the page you can use this css code:
```
#footer{
position:fixed;
clear:both;
}
```
position:fixed makes the footer sticky anyway there could be floating problems if you used float:left or float:right in your code before, so using also clear:both it clears the floating and ensures that the footer is at the bottom under other divs and not on the left or right of the precedent div.
0 讨论(0)
发布评论:

提交评论
- 加载中...

轮回少年

2021-01-14 20:10

This will work, no matter what the height of the #container is:

CSS:

    html, body {
        height: 100%;
    }

    #container {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin-bottom: -50px;
        position: relative;
    }

    #index_footer {
        height: 50px;
        line-height: 50px;
        position: relative;
        background: #CCC;
    }

    #push {
        height: 50px;
    }

HTML:

<div id="container">
    <div id="index_body">
        test
    </div>
    <div id="push"> </div>
</div>
<div id="index_footer" class="footer">
    test
</div>

0 讨论(0)

情深已故

2021-01-14 20:13

I believe the root of the problem is that the footer element in the HTML needs to be outside of the #container div. Also, I noticed after I removed that, issues with margin and padding on the body tag. Finally, the border-top on the .footer makes the height of the footer 46px, not 45px...

The corrected CSS:

/* FOOTER FIX */
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }

body{margin:0;padding:0;}
#container{ margin-bottom: -46px; }
.footer { 
    clear: both; 
    position: relative; 
    z-index: 10; 
    height: 30px; 
    padding-top:15px;
    color: #666;
    background-color:#F4F7FA;
    border-top:1px solid #E6E7E8; 
    font-size:95%;
    text-align: center;  
}    /* END FIX */

The corrected HTML:

<html>
<body>
    <div id="container">
        <div id="index_body">
        </div><!--end index_body -->
    </div><!--end container -->
    <div id="index_footer" class="footer">
    </div><!--end footer -->
</body>
</html>

0 讨论(0)

我在风中等你

2021-01-14 20:20

Going off Harmen, i have tested this and it works, with the footer in the container. altho it is a little hackish

CSS

html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }

div#index_body { 
  min-height: 100%;
  margin-bottom: -46px;
}

.footer, .push {
  height: 30px;
}

.footer { 
  clear: both; 
  position: relative; 
  z-index: 10; 
  margin: 0px;
}

.footer { 
  color: #666;
  background-color:#F4F7FA;
  border-top:1px solid #E6E7E8; 
  font-size:95%;
  text-align: center;  

   }    /* END FIX */

html

<body>
<div id="container">
<div id="index_body">
        <div class="push"></div><!--Used to force the footer down to avoid overlap of footer and text -->
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
</body>

0 讨论(0)

1 2 下一页