CSS 100% 内列高度

Question

更新：http://jsfiddle.net/dSkJb/19/

为了澄清，页脚应该在页面的底部，并且页面应该始终有 100% 的高度，所以中间行应该相应地调整。任何东西都不应与页脚重叠，并且页脚不应与任何东西重叠。本质上，如果您有一个高度为 100% 的两行表格，那么您很容易做到这一点。

---

这就是问题所在，一个高度为 100% 的 div 在一个高度为 100% 的 div 内，并且一些文本被撞倒了。

http://jsfiddle.net/sandraqu/dSkJb/8/

有没有办法使内部 div 的高度相对于其包含 div 的高度？

下面是原帖

---

我正在尝试让两个内列的高度达到 100%，并且不会干扰粘性页脚。到目前为止，我的粘性页脚与主容器相关，但我正在努力将#content、#col1 和#col2 的高度与#container 的高度匹配，而不会丢失粘性页脚。

不同的文章建议使用 height: auto;高度：100%；和 min-height （对于 ie6），但我发现 height: auto;干扰内部 div 高度。对位置也有建议：相对，浮动，显示：内联。选项太多？

请提出建议 :: http://jsfiddle.net/sandraqu/kDCTR/

Answer 1

Cross Browser Solution 用于 IE 8+。但理论上，您可以使用任何方法来获取中间的列。我刚刚使用了display: table; 和display: table-cell;。但是包装 div 不需要是display: table; 才能工作，所以你可以使用float 技巧，或者假列，或者圣杯，或者任何你想要的东西，让它与 IE 6+ 兼容。我只是懒得现在实施其中的任何一个。主要目标已经完成，我将让你处理细节。 :)

Answer 2

首先，在这种情况下，我不确定您所说的“粘性页脚”是什么意思。粘性页脚通常是在页面其余部分滚动时粘在适当位置的东西。但是，您的示例似乎将页脚“粘贴”到容器的底部，而不是视口的底部。这是正确的行为吗？

其次，根据您的处理方式，“100% 高度”列有几个选项：

1) 假的

使用看起来像您想要的列的背景图像。沿着body、container 或content 重复它，具体取决于您希望它的样式。请参阅A List Apart - Faux Columns 或谷歌“CSS Faux Columns”了解更多信息。

如果您想要一个真正的粘性页脚，这是最好的解决方案。

2) 定位您的元素

将position: relative 添加到您的content div，并将position: absolute; height: 100%; 添加到内容较少的列。将包含更多内容的列将用于增加您的 content 元素的高度。另请注意，您可能希望为内容较多的列添加边距，以将其推离内容较少的列。

这应该允许您的列一直推到页脚。如果您的页脚应位于容器底部而不是视口底部，这是更好的解决方案。

有关此技术的更多详细信息，请参阅我的jsFiddle。

Answer 3

有点不清楚您希望潜在溢出如何在中心内容区域上工作，以及您想要容纳的浏览器的年龄。对于 IE8+，我相信这可以满足您的需求：http://jsfiddle.net/dSkJb/51/。这是一个非常简短的内容示例：http://jsfiddle.net/dSkJb/52/。

也许有一些严重的针对性调整 IE7 可以适应（我花了太多时间试图让它工作，接近了几次，但没能完全得到它，所以我给了向上）。 IE6 肯定不能用这个。