CSS最小高度的100%容器高度

时间:2011-08-09 11:38:12

标签: html css

我有一种情况,我试图让一个元素占据其容器高度的100% - 而容器元素只指定了最小高度。不幸的是,当我这样做时,忽略height指令。 Here is an example。 “b”div,红色,应该填满整个父母。它没有,不在IE7,Chrome或FF3.6中。

如果我对容器有“height:1px”,那么“a”div,则“b”被拉伸到“a”的整个高度。 See here。但这仅限于FF3.6和IE7,而不是Chrome。所以我想我在这里做错了。

我觉得这是一个普遍的问题,必须有一个解决方案,我只是没有看到。在这种情况下,实现伸展到高度的最佳方法是什么?

1 个答案:

答案 0 :(得分:11)

您的CSS意味着子元素的高度是父元素指定高度的100%。如果您没有为父级指定高度,那么100%并不意味着什么。因此它不起作用。

您可以通过在父级上使用position:relative和在子级上使用position:absolute来实现您的目标:

http://jsfiddle.net/57EZn/25/

这不是一个漂亮的解决方案,但它可以满足您的需求。