CSS的唯一技术为一个固定的底部页脚可变高度，没有表，没有重叠 [英] CSS only technique for a fixed bottom footer with variable height, no tables, no overlap

问题描述

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

• 一个页尾，必须始终位于视口底部


• 重叠的主要内容元素 - 向下滚动


• 没有表格

---

标题

---

页脚

---

如果您删除任何要求，做，但不是所有要求完好。
任何人都知道一个解决方案？

解决方案

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

  .some-footer {
 position：fixed; 
 bottom：0 
 left：0; 
 width：100％
} 
  

内容将在页脚后面，您将无法向上滚动。你不能只是在内容上放置一个 padding-bottom ，因为你不知道页脚的高度。

我会建议在内容后添加页脚的副本，但这个与位置：相对和不透明度：0 。这样，您可以始终滚动，直到所有内容都可见，与页脚的高度无关。

As mentioned in the title, here are the requirements:

• a footer that must always be at the bottom of the viewport (no pushdown)
• css only
• height based on the content of the footer (variable)
• somehow prevent overlap of the main content element - when scrolled down
• no tables

---

header

---

content

---

footer

---

if you remove any of the requirements, I know how to do it, but not with all requirement intact. does anyone know a solution?

解决方案

To put the footer on the bottom you can use a variation of the following:

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

The problem with this is that the main content will be behind the footer and you won't be able to scroll it up. And you can't just put a padding-bottom on the content because you don't know the footer's height.

I would recommend putting a duplicate of the footer after the content, but this one with position: relative, and with opacity: 0. This way you can always scroll until all the content is visible, independently of the footer's height.

这篇关于CSS的唯一技术为一个固定的底部页脚可变高度，没有表，没有重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！