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

好吧，我是一种使我的个人网站，我编写了几天，我是一个初学者，我不知道为什么我的#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

来源

2014-09-02 Naveen Niraula

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

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

来源

2014-09-02 13:34:48 senectus

感谢您的关注，它是非常appriciated :) – 2014-09-02 13:40:36

但这种方法不适用于我的网站？我错过了什么，请帮助我格式化您的帮助，我的网站！ – 2014-09-02 13:45:57

抱歉 - 在编辑中修复。再试一次。 – senectus 2014-09-02 13:48:27

你已经设置#footer到position:absolute;这意味着它总是将是绝对到你的屏幕。

把它拿走，它会工作。

JSFiddle

来源

2014-09-02 13:27:27 Albzi

谢谢你救了我，我很沮丧过这种无聊的事情。谢谢。 – 2014-09-02 13:32:40

不用担心，很高兴我可以帮助:) @mistgeek – Albzi 2014-09-02 13:35:20

在#footer

删除：

position: absolute;

JSFiddle Demo

来源

2014-09-02 13:28:19 imbondbaby

是的，我确实认为这个人appriciate :) – 2014-09-02 13:32:05

您的页脚元素是position: absolute所以当窗口滚动，因为它是绝对到你的屏幕滚动。如果你想让它固定只是position: fixed;。为了您的要求，只需按照您的风格进行以下操作。

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

DEMO

来源

2014-09-02 13:28:52 Benjamin

不，我不想让它固定只是想把它放在网页的底部。虽然谢谢！ – 2014-09-02 13:31:23

所以你只需要从你的CSS中删除位置属性。 – Benjamin 2014-09-02 13:31:50

是的，我做到了，谢谢你的男人:) – 2014-09-02 13:33:33

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

来源

2014-09-02 13:46:05

您可以position:absolute;设置页脚，并添加bottom:0;或者你可以将其更改为position:relative;

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

#footer { 
    position:relative; 
}

来源

2014-09-02 13:48:07 user2787009

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

回答

相关问题