CSS：内容边框穿过固定的页脚边框答案

【问题标题】：CSS: content border crosses fixed footer borderCSS：内容边框穿过固定的页脚边框
【发布时间】：2012-10-25 11:03:22
【问题描述】：

我有一个固定的页脚 div 和一个内容 div。内容 div 的高度为 100%，我不希望它通过页脚，尽管我不想给出小于 100% 的百分比值。

<!-- fixed --><div id="footer" style="border:4px solid black;">
<div>

<!-- crosses the footer thus fails --><div id="content" style="border:4px solid blue;">
</div>

这是一个 JSFiddle 链接：http://jsfiddle.net/TAVmF/2/

蓝框的下边框应该在黑框的边框之上，并且不能越过它。

我想要的结果是下一个：http://i49.tinypic.com/2hs3mna.jpg

提前谢谢你。

【问题讨论】：

标签： html css fixed

【解决方案1】：

从页脚中删除position:fixed，并交换container 和footer div 的html 代码。

DEMO

DEMO 2

【讨论】：

不，我需要修复页脚，在滚动的任何点都可见
是的，它正在工作，你做得很好。非常感谢。
您意识到由于 CSS 的顺序，您无论如何都会覆盖固定在页脚上的位置，对吧？

【解决方案2】：

您需要在运行时使用jquery 设置内容max-height，并在内容样式中添加overflow:auto。

假设你的content max-height = screenheight - footer height.

希望这个公式对你有所帮助。

【讨论】：