Javascript 为什么'；我的粘脚不粘吗？_Javascript_Html_Css

Javascript 为什么'；我的粘脚不粘吗？

javascript html css

Javascript 为什么'；我的粘脚不粘吗？,javascript,html,css,Javascript,Html,Css,我浏览了所有与“粘性页脚”相关的问题，但没有任何帮助，因为我的#content div并不总是有足够的内容将页脚推到底。下面是我用来实现这一点的代码，但显然我做错了什么： html，主体，div#容器{高度：100%；} body>div#容器{高度：自动；最小高度：100%；} div#index_body{填充底部：30px；} .footer{ 明确：两者皆有；位置：相对位置； z指数：10；高度：30px；边缘顶部：-45px；填充顶部：15px； } .footer{ 颜色：

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

html，主体，div#容器{高度：100%；}
body>div#容器{高度：自动；最小高度：100%；}
div#index_body{填充底部：30px；}
.footer{
明确：两者皆有；
位置：相对位置；
z指数：10；
高度：30px；
边缘顶部：-45px；
填充顶部：15px；
}
.footer{
颜色：#666；
背景色：#F4F7FA；
边框顶部：1px实心#E6E7E8；
字体大小：95%；
文本对齐：居中；
}

我知道这并不能回答您的确切问题，但在多个浏览器中，它对我来说都非常有效。您可能想尝试一下（或者看看他所做的与您正在做的比较，看看是否可以确定修复方法）。

尝试将页脚div移到容器div之外。然后，您的技术应该会起作用。您在页脚位于包含div内但相对定位时设置页脚的方式。因此，即使包含的div可能有100%的高度，但其中的footer div仍然仅位于容器中内容的正下方

我的意思的一个简单例子（注意，为了确保页脚不与内容重叠，需要一个额外的div，底部填充一些

，

）

我认为问题的根源在于HTML中的footer元素需要位于#container div之外。此外，我在删除该元素后注意到，body标记上存在边距和填充的问题。最后，.footer上的边框顶部使页脚的高度为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>

无论#容器的高度如何，这都会起作用：

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

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

HTML:

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

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


测试
测试

离开哈门，我已经测试过了，它可以工作，页脚在容器中。虽然这有点老土

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>

其实很简单，以下是所需的最低模板：

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


所以问题1980857
html，正文{
保证金：0；
身高：100%；
}
#容器{
位置：相对位置；
最小高度：100%；
}
*html#容器{
高度：100%；/*这是IE6的最小高度*/
}
#页脚{
位置：绝对位置；
底部：0；
}
#页脚，#pushfooter{
高度：50px；/*两者必须具有相同的高度*/
}
内容
页脚

使容器

相对

并给它一个

最小高度

实际上会将页脚一直粘在底部，而不管内容的实际高度如何，这是您从评论中了解到的主要问题。

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

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

position:fixed会使页脚变粘如果以前在代码中使用float:left或float:right，可能会出现浮动问题，因此使用ALL clear:这两种方法都会清除浮动，并确保页脚位于其他div下的底部，而不是先前div的左侧或右侧。

哦，我已经尝试过很多次了，就像齐利昂的组合。。问题是，有时我的容器中没有足够的内容，所以页脚不会粘住，有时我有太多的内容，然后页脚粘住内容，而不是底部，有时我刚好有足够的内容来正确粘住它，也许在我的例子中，我需要使用javascriptI，我经常使用JavaScript来处理类似的问题，因为它几乎有我能想到的所有定位示例，并优雅地降低了我的排名。请大家举个例子，但有一点不好，当你调整窗口大小时，页脚与内容重叠。@Gandalf:是的，我明白你的意思。您应该能够将内容包装到另一个div中，并将其底部填充为100px；。我将相应地更新答案。现在更新答案，以便两个示例不会重叠内容。既然你说你不能把页脚移到容器外，那么第二个例子就是你想要的。好吧，它确实会把页脚推到网站的底部，但是下面还有一些空白，我该怎么处理呢？如果你知道我的意思的话，我指的是不必要的滚动条出现。。我根本不需要滚动条，但它看起来像是因为页脚下方的空白。滚动条是由使用具有上下边距的元素而不是

#容器中的填充物造成的。边距不计入高度，而是超出高度。你应该使用填充。另外，确保在CSS中设置以下内容以删除默认页边距：p，div{margin:0；}
。再次，复制粘贴上面的示例并运行它。你看不到滚动条。只是在这个模板的基础上进一步构建。嗯，它不再起作用了。同样的事情，你看，我从一开始就没有构建网站，我只是做一些最后的润色，谢谢你，不管怎样，你得到了投票，我明天会再试一次，现在感觉很累。tnx againThere可能是更多起作用的元素。只需验证整个CSS是否未在#容器中指定任何上/下边距，例如标题、列表等。否则，您需要增加