Question

我曾经有过这个模板，它就像这样得到了它的页脚css

footer{
position: absolute;
bottom: -3em;
left: 0;
right: 0;
font-size: 12px;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
color: rgb(160, 160, 160);
}

我正在使用php来获取动态内容但是，每当我的内容（包含在div中，就在页脚之前）发生变化时，当它改变它的长度（高度）时，这个页脚突然改变它的位置并突然放在顶部（网页上最高div）div附近。

我想知道如何让这个页脚停留在页面底部，我正在寻找一个，但我刚发现{postition：fixed;}，我的意思是将我的页脚“作为最后一个内容，在底部”而不是“停留在屏幕/窗口的底部”..

任何人都可以帮忙吗？提前谢谢

Answer 1

如果你的CODE很像，那么你很高兴

<强> HTML

<div class="wrapper">
    <div class="footer">Lorem Ipsum</div>
</div>

<强> CSS

.wrapper{
    position:relative; background:grey;
    height:200px    
}
.footer{
position: absolute;
bottom: -3em;
left: 0;
right: 0;
font-size: 12px;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
color: rgb(160, 160, 160);
}

<强> DEMO

更改wrapper高度以查看差异

页脚放置，不在窗口底部，而是在内容的底部

1 个答案: