html - CSS:最小高度 100%(固定元素也在屏幕上)？

Question

我一直在尝试使用 min-height:100% 来拉伸(stretch)我的内容区域以填充屏幕的剩余 %，但我完全被难住了。感谢您的帮助。

我在屏幕顶部有 3 个固定高度的 div 和 1 个固定高度的页脚。然后我有另一个非固定高度部分所在的 div，它是“容器”div。在这里我有内容和侧边栏 div，我想至少拉伸(stretch)到 100% 的屏幕，并扩展以适应内容。

http://jsfiddle.net/P3Ckk/110/

感谢任何帮助。这让我卡住了。

Answer 1

你有 #conatinerWide设置为灰色背景，我假设您希望它拉伸(stretch)以填充其余区域。

事情是html和 body只会扩展到足以容纳您拥有的内容。所以将它们设置为 100% 将告诉它填充文档窗口；让你的#containerWide现在是 100% 可用空间。

添加html, body { height: 100%; }应该实现你想要的

http://jsfiddle.net/rtgibbons/P3Ckk/111/

评论更新；

你想要的每一个元素min-height:100%要成为窗口的大小，您需要设置 height:100%到父元素。所以#containerWide需求height:100%和 #container需求min-height:100%; height:100% ;.现在是有趣的部分。如果您对 #exsi 执行相同的模式和 #cont将是 #container 的高度并且不针对 #foot 所需的空间进行调整.

这里是我要继续的地方

http://jsfiddle.net/rtgibbons/P3Ckk/113/

基本上，我设置了min-height:100%; height:100%在所有 parent 元素上。我搬家了#foot来自 #container所以它会被列最大化。然后我应用了 #foot 总高度的一些负边距底部所以它会被吸进里面#containerWide

两个注意事项。

1. 填充 100% 导致 #exsi和 #cont扩大过去#containerWide所以删除它们并根据需要将它们应用到内部元素或另一个包装器。
2. 页脚将出现在首屏下方。这是你定位的 b/c #containerWide ;我将把它作为练习留给你去弄清楚。