頁腳不在頁面底部，而是在背景圖像的底部

Question

我想在我的網站底部放置一個頁腳，但是它在背景圖片的底部很粘。 我嘗試了很多技巧，但是無法將其放置在網站底部的所有內容下（我不想將其設置為固定的，但是一旦網絡向下滾動，我想使其在所有內容下可見完全）。

請在下面找到我正在使用的代碼：

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

我已經檢查了其他主題中的所有答案，但仍然找不到我的問題的解決方案。 謝謝您的幫助。

墊子，問候

Answer 1

更改css類頁腳，以刪除粘性頁腳：

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

Answer 2

刪除position:absolute .footer類中的position:absolute 。

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

頁腳不在頁面底部，而是在背景圖像的底部

問題描述

2 個解決方案

解決方案1
0 2017-08-14 09:37:56

解決方案2
0 2017-08-14 09:40:02

頁腳不在頁面底部，而是在背景圖像的底部

問題描述

2 個解決方案

解決方案1 0 2017-08-14 09:37:56

解決方案2 0 2017-08-14 09:40:02

解決方案1
0 2017-08-14 09:37:56

解決方案2
0 2017-08-14 09:40:02