1

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

页脚代码：

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

}
4

5 回答 5

1

使用时要小心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;
}

这将从页面流中删除您的页脚，但这没关系，因为我们在页面底部为它分配了一个 40 像素的空间。

于 2013-07-06T05:05:10.237 回答
1

尝试添加：

position:absolute;
bottom: 0;

到您的页脚选择器。

于 2013-07-06T04:51:36.193 回答
0

使用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;
}
于 2013-07-06T05:33:55.167 回答
0

尝试这个

#footer {
    background: none repeat scroll 0 0 transparent;
    color: #4BB3E6;
    position: fixed;
    text-align: right;
    width: 100%;
}
于 2013-07-06T05:26:03.667 回答
-1

好吧，也许是因为您的最小身高为 95%。如果没有，您可以尝试：

#footer {
position: absolute;
bottom: 0;
margin: 0 auto;
}
于 2013-07-06T04:52:39.550 回答