Question

我试图让这个页脚div粘贴到我的页面底部，以及不重叠容器DIV。

我试图添加一个与页脚高度相同的推送类失败：

.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

＆＃13;

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

＆＃13;

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

＆＃13;

这可以通过设置页脚的高度然后使用css calc来计算页面的最小高度，页脚仍然在底部，希望这有助于人们：）

使页脚粘到底部而不是重叠容器

3 个答案: