Question

我浏览过与“粘性页脚”相关的所有问题，没有任何帮助，因为我的#content div并不总是有足够的内容将页脚推到底部。以下是我用来实现此目的的代码，但显然我做错了：

html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }

.footer { 
    clear: both; 
    position: relative; 
    z-index: 10; 
    height: 30px; 
    margin-top: -45px; 
    padding-top:15px;
}

.footer { 
    color: #666;
    background-color:#F4F7FA;
    border-top:1px solid #E6E7E8; 
    font-size:95%;
    text-align: center;  
}

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

我的一些尝试在索引体有大量文本图像时工作，然后页脚才会结束但是当它没有太多内容时，请说2段标记和图片页脚不粘。也许这只是CSS不可能，因为index_footer高度不固定？有没有办法用JavaScript做到这一点？或者这样做的正确方法是什么？

我的屏幕分辨率非常大，可能是1680 x 1050的问题

Answer 1

尝试将您的页脚div移动到容器div之外。那么你的技术应该有效。在页脚位于包含div内但是相对定位的情况下，您设置它的方式。因此，即使包含div可能具有100％的高度，其中的页脚div仍然只是低于容器中的内容。

我的意思的一个简单示例，（请注意，为了确保页脚不与内容重叠

，需要一些带有padding-bottom的额外div，

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

如果您无法将页脚移动到容器外部（无论出于何种原因），那么您也可以尝试将页脚完全放置在包含div中，使其位于底部。 position: absolute; bottom: 0px;等

例如，（，为了确保页脚与内容不重叠，需要一些带有padding-bottom的额外div，

<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: #ddd; } #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>

Answer 2

我知道这不能回答您的确切问题，但work done by Ryan Fait在多个浏览器中对我来说非常有效。您可能想尝试一下（或者看看他与您正在做的事情相比做了什么，看看您是否可以确定修复）。

Answer 3

我认为问题的根源是HTML中的页脚元素需要在#container div之外。此外，我注意到删除后，身体标签上的边距和填充问题。最后，.footer上的border-top使得页脚的高度为46px，而不是45px ......

更正后的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 */

更正后的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>

Answer 4

这实际上很简单，这是最低要求的模板：

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

制作容器relative并给它一个min-height实际上会将页脚始终固定在底部，而不管内容的实际高度如何，这是您从评论中理解的主要问题。

Answer 5

离开哈门，我已经测试了它并且它的工作原理，容器中的页脚。虽然它有点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>

Answer 6

为了实现粘性页脚，这是一个放置在网页底部固定位置的页脚，滚动页面时不会移动，您可以使用此css代码：

#footer{
position:fixed;
clear:both;
}

位置：固定使得页脚粘不管怎样可能存在浮动问题如果你之前在代码中使用了float：left或float：right，所以使用也清楚：它都清除浮动并确保页脚位于底部在其他div下，而不是在先前div的左侧或右侧。

Answer 7

无论#container的高度如何，这都会有效：

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

为什么我的粘性页脚不粘？

7 个答案: