頁腳不在頁面的底部，但在背景圖片的底部

我想在頁面的底部放置頁腳，但它對背景圖片的底部很粘。我嘗試了很多技巧，但我無法將它放在網站底部的所有內容之下（我不想將其作爲固定的內容，但是我希望在所有內容之下都能看到它，一旦網頁向下滾動完全）。頁腳不在頁面的底部，但在背景圖片的底部

請找我使用下面的代碼：

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <link href="style.css" type="text/css" rel="stylesheet"/> 
    </head> 
    <body> 
     <div class="background"> 
     </div> 
     <div class="text"> 
      <h1>xxxxxx<h1> 
      <h2>xxxxxxxxxxxxxx<h2> 
     </div> 
     <footer class="footer">Footer text</footer> 
    </body> 
</html>

CSS：

body, html { 
    position: relative; 
    height: 100%; 
} 

.background { 
    background-image: url("xxx.jpg"); 
    height: 100%; 
    background-position: center; 
    background-repeat: no-repeat; 
} 

.text { 
    margin: auto; 
    text-align: center; 
    width: 70%; 
} 

.footer { 
    position: absolute; 
    left:0; 
    bottom:0; 
    height:50px; 
    width:100%; 
    background:#999; 
}

我已經在另一個話題檢查了所有答案，但仍然無法找到我的問題的解決方案。謝謝您的幫助。

問候，墊

來源

2017-08-14 mat1984

更改CSS類頁腳，因爲這去除粘頁腳：

.footer { 
    position: relative; 
    height:50px; 
    width:100%; 
    background:#999; 
    display: block; 
}

來源

2017-08-14 09:37:56 gudboisgn

謝謝 - 現在everyting工作正常。 – mat1984

如果這有助於您將此標記爲正確答案:) – gudboisgn

從.footer類刪除position:absolute。

.footer { 
    left:0; 
    bottom:0; 
    height:50px; 
    width:100%; 
    background:#999; 
    display: block; 
}

來源

2017-08-14 09:40:02

謝謝 - 現在每個作品都可以正常工作。 – mat1984

@ mat1984如果這有助於您，請將其標記爲答案。 :) –

頁腳不在頁面的底部，但在背景圖片的底部

回答

相關問題