Html CSS唯一技术，用于固定底部页脚，具有可变高度、无表格、无重叠

如标题所述，以下是要求：

• 必须始终位于视口底部的页脚（无下推）
• 仅css
• 基于页脚内容的高度（变量）
• 在向下滚动时，以某种方式防止主内容元素的重叠
• 没有桌子

---

标题

---

内容

---

页脚

---

如果您删除了任何一个需求，我知道如何做，但并非所有需求都完好无损。

---

有人知道解决方案吗？

这应该可以满足您的需要！：）它将始终位于页面底部。 无论发生什么情况，这将始终位于视口的底部！：D

#页脚{
高度：自动；
最小高度：100px；
宽度：100%；
背景颜色：蓝色；
底部：0px；
位置：固定；
显示：块；
z指数：100000；
}

---

要将页脚放在底部，可以使用以下变体：

.some-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%
}

这样做的问题是，主要内容将位于页脚后面，您将无法向上滚动。你不能只在内容上加一个

填充底部

，因为你不知道页脚的高度

---

我建议在内容后面放一个重复的页脚，但是这个页脚带有

位置：relative

，不透明度为0。通过这种方式，您可以始终滚动，直到所有内容都可见，与页脚的高度无关。

我正在寻找的是codez。使用任何CSS框架如何？类似于SASS或更小的框架？这将是一个选择。他的问题的可能重复之处并不是他不知道如何固定位置。这是因为他不知道如何防止内容在页脚下流动，页脚的高度可能是可变的。我认为这是不可能的，只是CSSPosposition固定将允许它粘到页面底部。上面的代码工作得很好。他再一次知道这一点。他希望它“以某种方式防止主内容元素的重叠”，因此，如果视口高度为600px，页脚高度为200px，内容高度为800px，他希望内容高度为400px，并在进入页脚下方之前进行溢出滚动。页脚的高度是可变的，所以他不知道它始终是一个固定的数字，这意味着他希望计算出元素使用其他元素来确定大小的高度。正如kai-qing已经说过的，您的解决方案忽略了第四个要求。或者你能告诉我如何设置一个“body”div，一旦你在页面中完全向下滚动，就不会出现重叠了吗？这就是我想要的方式。我不喜欢它，因为它是一个黑客，但无形的页脚真的做它的工作。在我接受你的回答之前，我会等一等，看看是否有人知道一个干净的解决方案：）非常感谢。