CSS：最小高度 100%（屏幕上也有固定元素）？答案

【问题标题】：CSS: min-height 100% (with fixed elements also on screen)?CSS：最小高度 100%（屏幕上也有固定元素）？
【发布时间】：2012-06-03 21:02:44
【问题描述】：

我一直在尝试使用 min-height:100% 来拉伸我的内容区域以填充屏幕的剩余 %，但我只是被难住了。任何帮助表示赞赏。

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

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

我们不胜感激。这让我陷入了困境。

【问题讨论】：

标签： html expand css

【解决方案1】：

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

问题是html 和body 只会扩大到足以容纳您拥有的内容。因此将这些设置为 100% 将告诉它填充文档窗口；让您的 #containerWide 现在成为 100% 可用空间。

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

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

cmets 更新；

对于您希望 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%。我已将#foot 移出#container，因此列将被最大化。然后我应用了#foot 总高度的一些负边距底部，所以它会被吸收到#containerWide 内

两个警告。

100% 的填充导致 #exsi 和 #cont 扩展超过 #containerWide，因此删除它们并根据需要将它们应用到内部元素或另一个包装器。
页脚将出现在首屏下方。这是您定位的 b/c #containerWide；我将把它作为练习留给你来解决。

【讨论】：

这就是我想要的，但不完全是。抱歉没有说清楚。我只是设置了这些颜色，以便更容易看到所有不同的 div。我实际上希望#container 也用#content 和#exsi div（黄色和橙色）填写。因此，浅灰色应该像在您的示例中那样填充，但黄色和橙色也会填充剩余空间，将#foot（绿色）留在底部。另外，我希望这只是一个最小值，以便当 #content 或 #exsi div 的内容超过 100% 时......它们会扩展（希望总是相互扩展）。
这变得有点棘手。用回复更新我的答案
谢谢。那是完美的。现在，我明白了……为什么 height:100% 不进入导航、顶部和标题 div？是因为那些妨碍了父“containerWide”div吗？并且不能填充整个 100%？如果是这样，那么我猜这是高度 100% 的属性......它不会重叠 div，它只是剩余空间的 100%？我只是想了解它背后的逻辑，这样我就知道未来会发生什么。无论如何，再次感谢您！
我很难理解评论中的所有问题。你能做的最好的事情就是做实验，看看一切是如何反应的。我们在其他元素上定义height:100% 的原因是为了让min-height:100% 有一些东西可以使用，它们使用父元素的高度。