Html 为什么我的页脚与页面一起滚动？_Html_Css

Html 为什么我的页脚与页面一起滚动？

html css

Html 为什么我的页脚与页面一起滚动？,html,css,Html,Css,好吧，我正在制作我的个人网站，我已经编写了几天了，我是一个初学者，我不明白为什么我的#页脚会随着我的网页滚动。这是个问题，因为它是在中间而不是在我的网站的底部。 HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="icon" type="image/png" href="icon.png" />

好吧，我正在制作我的个人网站，我已经编写了几天了，我是一个初学者，我不明白为什么我的

#页脚

会随着我的网页滚动。这是个问题，因为它是在中间而不是在我的网站的底部。

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>

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

为了让我的问题更清楚，我在下面附上了我网站的截图，请查看

哦，是的，

只是用来测试页脚的

您已将

#footer

设置为

位置：绝对这意味着它对你的屏幕总是绝对的
把它拿走，它就会起作用
在#页脚中
删除：
position: absolute;

您的页脚元素是位置：绝对的
，因此它在windows滚动时滚动，因为它对您的屏幕是绝对的。如果你想让它固定，只需位置：固定。根据你的要求，只需按照你的风格做以下事情
#footer{
  /*position: absolute;removed*/
}


您需要将html元素设置为相对位置和最小100%高度，这样当您的页脚完全定位并设置为底部：0时，它将真正位于底部
html {
    position:relative;
    min-height:100%;
}

然后可以设置页脚的高度：
#footer {
   width:100%;
   height:100px;
   position:absolute;
   bottom:0;
}

并使用相同的底部填充量将页脚高度偏移到正文：
body {
   padding-bottom:100px;
}

这种技术被称为“粘性页脚”。无论有多少内容，页脚都将始终保持在页面的最底部。
对于“底部”，您必须设置id页脚的高度，对于“中间生成宽度”。然后使底部为0px。
您可以使用位置设置页脚：绝对和添加底部：0或您可以将其更改为位置：相对
#footer {
   position:absolute;
   bottom:0;
}

或
不，我不想把它修好，只是想把它放在网页的底部。谢谢你！所以你只需要从你的css中删除position属性。很高兴随时帮助你。谢谢你救了我。我为这件愚蠢的事情感到沮丧。谢谢。不用担心，很高兴我能帮上忙：）@mistgeekThank谢谢你的关注，非常感谢：）但是这种方法对我的网站不起作用？我遗漏了什么请帮我格式化你的帮助和我的网站！是的，差不多，但页脚还是挡住了我页面底部的一些文字？我该怎么办？我的意思是页脚在底部，但是文本被阻止了！您是否将底部填充的页脚高度偏移到了车身？给我们一个jsfiddle，让我们看看。谢谢你终于解决了。你的注意力真是太好了！
#footer {
   position:relative;
}