CSS：最小高度100％（屏幕上还有固定元素）？

我一直试图使用最小高度：100％来让我的内容区域伸展以填充屏幕的剩余百分比，但我只是简单的难住。任何帮助表示赞赏。CSS：最小高度100％（屏幕上还有固定元素）？

我有3个固定的高度divs在屏幕的顶部和1个固定高度页脚。然后我有另一个div，其中非固定高度部分位于，这是“容器”div。在这里我有内容和边栏div，我想扩展到100％的屏幕最低限度，并扩大到适合的内容。

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

任何和所有帮助表示赞赏。它让我卡住了。

来源

2012-06-03 jstacks

您有#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所需的空间。

这里就是我会继续

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

基本上，我对所有的父母元素设置min-height:100%; height:100%。我已将#foot移出#container，因此它将与列最大化。然后我申请了一些负高度的底部总高度为#foot，所以它会被吸进里面#containerWide

两个注意事项。

填充用100％是造成#exsi和#cont扩大过去#containerWide所以去除它们，并根据需要或又一包装将它们应用到所述内元件。
页脚将出现在折叠下方。这是你正在定位的B/C #containerWide;我会把这个作为一个练习，让你弄清楚。

来源

2012-06-03 21:19:30

这就是我想要的，但不完全是。抱歉不清楚。我只是设置这些颜色，以便更容易看到所有不同的div。我实际上希望#container用#content和#exsi div（黄色和橙色）填充。所以，浅灰色应该像您的示例中那样填充，但黄色和橙色也会填充剩余空间，并将#foot（绿色）留在底部。此外，我希望这只是一个最低限度，以便当#content或#exsi divs的内容超过100％时......他们扩大（希望总是扩大彼此）。 – jstacks

这变得有点棘手。更新我的答案与答复 –

谢谢。这是完美的。现在，我理解......为什么是高度：100％不会进入导航，顶级和标题div？是因为那些阻碍父“containerWide”div的方式？并且不要填写整个100％？如果是这样，那么我认为这是一个高度为100％的属性......它不会与div相重叠，它只会是剩余空间的100％？我只是想了解它背后的逻辑，所以我知道未来会发生什么。无论如何，再次感谢你！ – jstacks

CSS：最小高度100％（屏幕上还有固定元素）？

回答

相关问题