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。

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

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

2 个答案: