拉伸内部 div 以匹配可变高度的容器。不可能的？

Question

我喜欢认为我是一个相当不错的……嗯，还过得去的……网络开发人员。我已经建立了大概... IDK，50 个网站，使用了大量的 Flash 和 Javascript，以及一些数据库支持的应用程序，并做了足够的图形设计，能够有效地伪造它:)

我遇到过这个问题在我的职业生涯中出现过六次：当容器的高度可变时，如何将内部 div 设置为包含 div 的 100% 高度？我知道你可以用 Javascript 或使用人造列来做到这一点，但我向狗发誓，如果没有办法用纯 HTML/CSS 来做到这一点，我将对生活和 W3C 感到非常失望:(

这里是模型伙伴： http://random.siliconrockstar.com/heightTest/

看，内部div #content 将 #container 向下推。我希望粉红色部分 #shadow 与 #content 的高度相同。遇到此问题的常见情况是那些对 Web 开发一无所知并使用 a 的设计师。很多阴影；只是假装粉色部分是一个阴影，我需要向下延伸 #content 的右边缘：

是的，我知道你现在可以用 CSS 做阴影，即使在 IE 中也可以进行一些修改，但在这种情况下。我的设计问题阻止我这样做如果

没有 JavaScript，这真的不可能吗？

Answer 1

如果IE6不是主题，你可以这样做：

#shadow{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100px;
  background: #F69;
}

Answer 2

我认为没有 JavaScript 是不可能的，但根据你的需要，你可以使用这种东西： http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 3

我想也许新的 css3 东西会开始帮助解决这个问题：
例如

.container { display: box; box-align: stretch; box-orient: vertical; }  
.container div { box-flex: 1; }

（您可能需要 -moz- 和 -webkit- 前缀）

Answer 4

对于粉色的那一款

#shadow{
    height: inherit;
}

Answer 5

出色地。有多种方法可以做到这一点。最古老的一种是使用大底部填充和大负底部边距，如下所述： http://www.alphapapahotel.com/equal-height-div-columns-100-percent/css/

但这种方式有它的缺点：你需要设置父母的元素溢出隐藏以使其工作。因此，如果您将绝对定位元素置于内部以使其溢出，则不能。另外，如果区域位于“overflow：hidden;”内div 具有锚点（例如 ），div 内的区域将滚动，而不是页面。

另一种方法是使用表格单元格属性： http://jsfiddle.net/8UPeR/ 。在旧版浏览器中不起作用。

但要将 #shadow 拉伸到 #content 的高度，有更简单的方法，例如使用伪元素 ( http: //jsfiddle.net/PWMsz/1/ ）或“位置：绝对”，如topek的示例中所示。