CSS：min-height 100％（屏幕上还有固定元素）？

Question

我一直在尝试使用最小高度：100％来扩展我的内容区域以填充屏幕的剩余百分比，但我只是简单地难倒。任何帮助表示赞赏。

我在屏幕顶部有3个固定高度的div和1个固定高度的页脚。然后我有另一个div，其中非固定高度部分位于，这是“容器”div。在这里，我有内容和侧边栏div，我希望至少延伸到屏幕的100％，并扩展以适应内容。

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

感谢任何和所有帮助。它让我陷入困境。

Answer 1

你有#conatinerWide设置为灰色背景，我假设你想让它伸展以填补其余部分。

事情是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的高度，而不是调整min-height:100%; height:100%所需的空间。

这是我继续

的地方

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

基本上，我在所有父元素上设置了#foot。我已将#container移出#foot，因此列数最多。然后我在#containerWide的总高度应用了一些负余量底部，因此它会在#exsi

内被吸收

两个警告。

1. 100％填充导致#cont和#containerWide扩展超过#containerWide，因此将其删除并根据需要将其应用于内部元素或另一个包装。
2. 页脚将显示在折叠下方。这是b / c你定位{{1}};我会留下这个练习让你弄明白。