页面底部的页脚

Question

我查看了多个答案，但出于某种原因，我无法让其中任何一个起作用。我试图将我网站的页脚放在页面的最底部，下面没有任何 space。

Here is a link to my website. 目前只有索引和关于页面在上。

我是一名学生，所以我知道我的代码不是最好的，但我正在努力！

我的CSS:

html {
height: 100%;}

#wrapper {
position:relative;
background: #fff;
width: 990px;
min-height:100%;
margin: auto;}

footer {
clear: both;
height: 175px;
width: 990px;
background: #005959;
position: absolute;
bottom: 0px;
left: 0px;}

而我的 HTML 是基本的包装器、页眉、内容、页脚。

Answer 1

只需将此添加到您的 css:

#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

这是一个包含上述代码的 jsfiddle：https://jsfiddle.net/AndrewL32/e0d8my79/23/

Answer 2

由于您已将 <section> 设置为相对关系，因此页脚将根据它进行定位

从 <section> 标签中移除页脚或从 section 标签中移除相对定位

Answer 3

问题在于父容器充当包装器并且高度基本上为 0。因此，当您绝对将页脚定位到底部时，它定位到包装器的底部，即位于页面顶部，因为它没有高度。您可以浮动页脚，它会显示在下方。尝试在页脚上更正 CSS：

footer {
    float: left;
    width: 100%;
    clear: both;
    height: 175px;
    width: 990px;
    background: #005959;
}

编辑：

如果您浮动所有内部容器，它将迫使页脚位于底部：

header,
img#slideshow,
section#mainContent,
footer {
     float:left;
     width: 100%;
}
footer {
     height: 175px;
     background: #005959;
}

页面底部的页脚

Footer at the bottom of a page

html

css

footer