Question

好的，我正在创建我的个人网站，我编写了几天，我是初学者，我无法弄清楚为什么我的#footer与我的网页一起滚动。这是一个问题，因为它粘在我的网站的中间而不是底部。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/png" href="icon.png" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title>Naveen Niraula | Home</title>
    </head>

    <body>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <div id="wrapper">
            <div class="mcont">
                <article class="firstart"><br>
                <h1>How can you do that?</h1>
                <p>What is the use of my website if there is nothing more</p><br>
                </article>
                <div class="test"></div>
            </div>
            <div id="test"></div>
        </div>
        <div id="footer">
            <p class="footer">Copyright &copy; 2014 Naveen Niraula. All Rights Reserved.</p>
        </div>
    </body>
</html>

CSS：

  html, body {
     margin: 0px;
}
nav {
    background-color: #311310;
}
nav ul {
    margin: 0px;
    padding: 10px 0px 10px 100px;
}
nav ul li {
    color: #d9d9d9;
    display: inline;
    padding: 0px 10px;
    font-family: klavika;
    font-size: 14pt;
}
nav ul li a {
    color: #d9d9d9;
    text-decoration: none;
}
nav ul li a:hover {
    color: #ffffff;
}
#wrapper {
    margin: 0px 100px 0px 100px;
    background-color: #ebebeb;
}
.mcont {
    margin: 0px 5px;
    font-family: dejavu;
}
.firstart h1, p {
    margin: 0px;
}
#footer {
    padding: 5px;
    background-color: #009688;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
.footer {
    padding: 0px 0px 0px 100px;
    color: #333333;
    font-family: condensed;
}
#test {
    height: 1000px;
    background-color: #008080;
}

为了使我的问题更清楚，我附上了我的网站截图，请检查出来。

哦，是的，<div id="test"></div>仅用于测试页脚。

Snap of my website

Answer 1

您已将#footer设置为position:absolute;，这意味着它对您的屏幕始终是绝对的。

拿走它，它会起作用。

JSFiddle

Answer 2

在#footer

卸下：

position: absolute;

<强> JSFiddle Demo

Answer 3

您的页脚元素为position: absolute，因此当窗口滚动时它会滚动，因为它对您的屏幕是绝对的。如果你想修复position: fixed;。根据您的要求，只需按照您的风格进行以下操作。

#footer{
  /*position: absolute;removed*/
}

<强> DEMO

Answer 4

http://jsfiddle.net/hzerfwum/

您需要将html元素设置为相对位置和最小100％高度，因此当您的页脚绝对定位并设置为底部时：0它将真正位于底部。

html {
    position:relative;
    min-height:100%;
}

然后你可以设置页脚的高度：

#footer {
   width:100%;
   height:100px;
   position:absolute;
   bottom:0;
}

并使用与身体相同数量的底部填充来偏移页脚的高度：

body {
   padding-bottom:100px;
}

这种技术被称为“粘性页脚”。无论内容有多少，页脚都会始终停留在页面的最底部。

Answer 5

对于底部，您必须设置id页脚的高度和中心制作宽度。然后制作底部0px。

Answer 6

您可以使用position:absolute;设置页脚并添加bottom:0;，也可以将其更改为position:relative;

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

OR

#footer {
   position:relative;
}

为什么我的页脚滚动页面？

6 个答案: