使页脚贴在底部而不与容器重叠

Question

我试图让这个页脚 div 贴在我的页面底部，并且不与容器 DIV 重叠。

我一直在尝试添加与页脚高度相同的推送 class，但没有成功：

.push {
    min-height: 150px;
    position: absolute;
}

请帮忙！

Answer 1

使用footer{ bottom:0px; position:fixed;}

Answer 2

从您的容器中删除 position: absolute，您不需要它。给出页脚 position: fixed，容器需要 margin-bottom: 150px;，你就完成了

https://jsfiddle.net/55frzot1/2/

Answer 3

虽然我会试一试并提出我自己的解决方案，它只是 css 和 html

的一小部分

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}

<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

这是通过设置页脚的高度然后使用 css calc 计算出页脚仍位于底部的页面可以达到的最小高度来实现的，希望这对人们有所帮助:)

使页脚贴在底部而不与容器重叠

Make footer stick to bottom and not overlapp container

html

css

footer