页脚不在页面底部,而是在背景图像的底部

时间:2017-08-14 09:36:35

标签: html css background-image footer

我想在网页底部放置一个页脚,但它背景图像的底部是粘性的。我尝试了很多技巧,但是我不能把它放在网站底部的所有内容上(我不想把它固定在一起)但是我想让它在所有内容下都可见,一旦网页向下滚动完全)。please see attached image with desirable position of the footer

请在下面找到我正在使用的代码:

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

我已经检查了其他主题中的所有答案,但仍无法找到我的问题的解决方案。谢谢你的帮助。

问候, 垫

2 个答案:

答案 0 :(得分:0)

更改css类页脚,以删除粘性页脚:

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

答案 1 :(得分:0)

position:absolute课程中删除.footer

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