Css 布局固定宽度，带固定页脚的全高，全宽

我需要一些布局方面的帮助。这就是我想要实现的目标：

以下是规格：

• 收割台具有固定高度
• 页脚始终位于底部并具有全宽（100%）
• 内容具有固定宽度
• 内容基本上具有减去页脚的全高，但与页脚的重叠正好为20px

当内容比视口短或长时，这当然必须起作用。 我已经玩了几个小时了，我就是不能让它实现所有的功能

我在这里为它制作了一把小提琴：

目前，此解决方案存在以下问题：

• 视口越短，与页脚重叠的内容越多（必须正好是20px）
• 内容部分不会填充视口

这可能吗？有人能帮我解决这个问题吗

我尝试过这些解决方案及其变体，但两者与我的用例略有不同：

非常感谢你的帮助

---

Chris

我创建了一个可能的解决方案，在页脚中插入两个额外的div来伪造覆盖

一个恼人的缺点是：在Chrome中，最高的div（用来遮住dropshadow）在调整大小时似乎会移动1px。你很好

编辑：找到了Chrome中像素偏移的修复程序：

---

EDIT2：或者，如果使用jQuery是一种选择，结果会更好一些：

谢谢您的回复！问题是，#内容不应该滚动，它应该随着内容的增长而增长，并在任何情况下填充视口。对此有什么想法吗？那只是隐藏内容，而不是扩展内容以适应所有内容。对不起，误解了。在这种情况下，请从#content中删除高度，从#footer中删除绝对位置（这也是非jQuery解决方案），谢谢。nr.9看起来不错，但是当内容比视口短时，页脚不在底部。添加了最小高度：80%到#内容