爲什麼我的頁腳在頁面上滾動？

好吧，我是一種使我的個人網站，我編寫了幾天，我是一個初學者，我不知道爲什麼我的#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

爲什麼我的頁腳在頁面上滾動？

回答

相關問題