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

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

演示

更改wrapper高度以查看差异