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

我觉得我很不错......好吧,可以接受......网络开发者。我已经建成了...... IDK,50个网站,有大量的Flash和Javascript,还有一些数据库支持的应用程序,并且做了足够的图形设计,能够胜任它们:)

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

Here be the mockup matey: http://random.siliconrockstar.com/heightTest/

看,内部div #content推送#container。我希望粉红色的部分#shadow与#content的高度相同。我遇到这个问题的常见情况是设计师对Web开发一无所知并使用大量阴影;只是假装粉红色的部分是一个阴影,我需要延伸到#content的右边缘。

旁白:是的,我知道你现在可以用CSS做一些阴影,即使在IE浏览器中有一些黑客,但在这种情况下,我有设计问题阻止我这样做。

没有Javascript,这真的不可能吗? :(

1

5 答案

如果IE6不是主题,你可以这样做:

#shadow{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100px;
  background: #F69;
}
2
额外
你太棒了。在我的XP/IE7 VM中不起作用,但我不在乎,它适用于IE8 + :)
额外 作者 siliconrockstar,

我想也许新的css3东西会开始帮助这个: 例如

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

(您可能需要 -moz --webkit - 前缀)

1
额外

I think it's impossible without JavaScript but according what you need you can use this kind of stuff: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

1
额外
嗯...是的,这种看起来更像是一个混乱的黑客而不仅仅是使用javascript。感谢您的回复,这是一篇非常有趣的文章。
额外 作者 siliconrockstar,

对于粉红色的

#shadow{
    height: inherit;
}
0
额外
似乎不起作用,我假设因为你不能继承未指定的高度。
额外 作者 siliconrockstar,

好。有很多方法可以做到这一点。最旧的是使用大底部填充和大的负底部边缘,如下所述: http://www.alphapapahotel.com/equal-height-div-columns-100-percent/css/

但是这种方式有它的缺点:你需要将parent的元素溢出设置为hidden以使其工作。因此,如果你内在的绝对定位元素溢出它,你就不能。如果区域内“溢出:隐藏;” div有锚点(例如 )div内的区域将被滚动,而不是页面。

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

但是只要将#shadow拉伸到#content的高度,就会有更简单的方法,比如使用伪元素( http: //jsfiddle.net/PWMsz/1/ )或“position:absolute”,如topek的例子。

0
额外