Question

我让我的页脚停留在页面底部here，但我做了一些事情，不知道是什么，现在它低于内容。我已经尝试更改包装器的最小高度值，但它没有做任何事情。

页脚代码：

<div id='footer'>&copy; Copyright 2013 Austen Patterson. All Rights Reserved.</div>

</body>
</html>

页脚样式：

#footer {
margin-right: 10%;
min-width: 100%;
color: #4bb3e6;
text-align: right;
}

身体/包装风格：

body {
    background:url("http://pattersoncode.ca/incls/pw_pattern.png");
    color: black;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Verdana, sans-serif";
    min-width: 94%;
    min-height: 95%;
    font-family: 'Muli', sans-serif;
}
#wrapper {

    animation: fadein 2s;
    -moz-animation: fadein 0.25s; 
    -webkit-animation: fadein 0.25s; 
    -o-animation: fadein 0.25s;
    min-width: 100%;
    min-height: 95%;

}

Answer 1

尝试添加：

position:absolute;
bottom: 0;

到你的页脚选择器。

Answer 2

使用position: absolute时要小心。截至撰写本文时，如果页面上的内容太多（滚动条的内容足够多），则会中断页面。我假设你总是希望页脚低于内容。

为了确保您的身体的min-height样式有效，请添加：

html { height: 100% }

此外，要确保您的页脚始终显示在内容下方，请添加

body {
    margin: 0; //remove default margin. you may not need
               //this, but it will prevent problems with
               //the body being too big
    min-height: 100%;
    box-sizing: border-box; //making sure padding works with 100% sizing.
    padding-bottom: 40px; //just enough for your footer
}
#footer {
    position: absolute;
    bottom: 0;
}

这将从页面流中移除页脚，但是没关系，因为我们已在页面底部为其分配了40px的空间。

Answer 3

试试这个

#footer {
    background: none repeat scroll 0 0 transparent;
    color: #4BB3E6;
    position: fixed;
    text-align: right;
    width: 100%;
}

Answer 4

使用positon:fixed，DEMO http://jsfiddle.net/VDfcC/

#footer {
    position:fixed;
    left:0;
    bottom:0;
    z-index:10;
    margin-right: 10%;
    min-width: 100%;
    color: #4bb3e6;
    text-align: right;
}

Answer 5

好吧也许是因为你的最小高度为95％。如果没有，你可以尝试：

#footer {
position: absolute;
bottom: 0;
margin: 0 auto;
}

页脚没有停留在页面底部

5 个答案: