0

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

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

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

任何和所有的帮助表示赞赏。它让我陷入困境。

4

1 回答 1

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。

这是我继续的地方

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

基本上，我已经设置min-height:100%; height:100%了所有的父母元素。我已经搬出#foot去了，#container所以它会被列最大化。然后我应用了总高度的一些负边距底部，#foot所以它会被吸到里面#containerWide

两个警告。

  1. 填充 100% 导致#exsi并#cont扩展过去#containerWide，因此删除它们并根据需要将它们应用到内部元素或另一个包装器。
  2. 页脚将出现在折叠下方。这是您正在定位的 b/c #containerWide；我将把它作为一个练习留给你去弄清楚。
于 2012-06-03T21:19:30.687 回答