Question

我觉得我很不错......好吧，可以接受......网络开发者。我已经构建了...... IDK，50个网站，拥有大量的Flash和Javascript，以及一些数据库支持的应用程序，并且做了足够的图形设计以便能够胜任伪造它：）

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

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

看，内部div #content推送#container。我希望粉红色的部分#shadow与#content的高度相同。我遇到这个问题的常见情况是设计师对Web开发一无所知并使用大量阴影;只是假装粉红色部分是一个阴影，我需要延伸到#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东西会开始帮助这个： e.g。

.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/

但是这种方式有它的缺点：你需要将parent的元素溢出设置为hidden来使其工作。因此，如果你内在的绝对定位元素溢出它，你就不能。如果区域内“溢出：隐藏;” div有锚（＆lt; a name =“first-paragraph”＆gt;＆lt; / a＆gt;例如）div内的区域将被滚动，而不是页面。

另一种方法是使用table-cell属性：http://jsfiddle.net/8UPeR/。通过它在旧版浏览器中无效。

但是只要将#shadow拉伸到#content的高度，就会有更简单的方法，例如使用伪elemens（http://jsfiddle.net/PWMsz/1/）或“position：absolute”，如topek的例子。

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

5 个答案: