布局固定宽度，全高，固定页脚，全宽

Question

我可以在布局上使用一些帮助。这就是我想要实现的目标：

以下是规格：

• 标题有固定高度
• 页脚始终位于底部并具有全宽（100％）
• 内容具有固定宽度
• 内容基本上具有全高度减去页脚，但是与页脚重叠恰好为20px

当内容比视口更短和更长时，这当然必须有效。 我一直在玩这个几个小时，我无法让它完成所有的功能。

我在这里创造了一个小提琴：http://jsfiddle.net/Sq4Pk/6/

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

• 视口越短，内容与页脚重叠的越多（必须精确到20px）
• 内容部分未填充视口

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

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

• http://peterned.home.xs4all.nl/examples/csslayout1.html
• http://www.cssstickyfooter.com

非常感谢您的帮助！

克里斯

Answer 1

我创建了一个可能的解决方法，在页脚中插入两个额外的div来伪造叠加层。

一个恼人的缺点：在Chrome中，最高div（掩盖阴影）似乎在调整大小时会移动1px。 FF + IE很好。

http://jsfiddle.net/Sq4Pk/3/

编辑：找到了Chrome中像素转换的修正：http://jsfiddle.net/Sq4Pk/4/

EDIT2：或者如果它是一个使用jQuery的选项，结果甚至会更好：http://jsfiddle.net/Sq4Pk/5/