Question

我查看了多个答案，由于某种原因，我无法让他们中的任何一个工作。我试图将我网站的页脚放在页面的最底部，下面没有任何空格。

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

页脚底部的页脚

3 个答案: