页脚不在页面的底部，但在背景图片的底部

我想在页面的底部放置页脚，但它对背景图片的底部很粘。我尝试了很多技巧，但我无法将它放在网站底部的所有内容之下（我不想将其作为固定的内容，但是我希望在所有内容之下都能看到它，一旦网页向下滚动完全）。页脚不在页面的底部，但在背景图片的底部

请找我使用下面的代码：

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如果这有助于您，请将其标记为答案。 :) –

页脚不在页面的底部，但在背景图片的底部

回答

相关问题