I have a situation where I am trying to make an element occupy 100% of the height of its container - and the container element only has min-height specified. Unfortunately, when I do this, the height directive is ignored. Here is an example. The "b" div, the red one, should fill the entire parent. It doesn't, not in IE7, Chrome, or FF3.6.
我有一种情况,我试图使一个元素占据其容器高度的100% - 并且容器元素只指定了最小高度。不幸的是,当我这样做时,忽略了height指令。这是一个例子。 “b”div,红色,应该填满整个父母。它没有,不是在IE7,Chrome或FF3.6中。
If I had "height: 1px" to the container, the "a" div, then "b" is stretched to the entire height of "a". See here. But this only in FF3.6 and IE7, not in Chrome. So I guess I am doing something wrong here.
如果我对容器有“height:1px”,那么“a”div,则“b”被拉伸到“a”的整个高度。看这里。但这仅限于FF3.6和IE7,而不是Chrome。所以我想我在这里做错了。
I feel like this is a common problem that there must be a solution to that I'm just not seeing. What is the best way to achieve stretch-to-height in this case?
我觉得这是一个普遍的问题,必须有一个解决方案,我只是没有看到。在这种情况下,实现伸展到高度的最佳方法是什么?
1 个解决方案
#1
11
Your CSS means that the child element's height is 100% of the specified height of the parent element. If you do not specify a height for the parent, then the 100% doesn't mean anything. Hence it doesn't work.
CSS表示子元素的高度是父元素指定高度的100%。如果您没有为父级指定高度,那么100%并不意味着什么。因此它不起作用。
What you want can be achieved by using position:relative on the parent and position:absolute on the child:
你想要的是通过使用position:相对于父级和位置:绝对子项:
It's not a beautiful solution but it does what you are after.
这不是一个美丽的解决方案,但它会做你想要的。
#1
11
Your CSS means that the child element's height is 100% of the specified height of the parent element. If you do not specify a height for the parent, then the 100% doesn't mean anything. Hence it doesn't work.
CSS表示子元素的高度是父元素指定高度的100%。如果您没有为父级指定高度,那么100%并不意味着什么。因此它不起作用。
What you want can be achieved by using position:relative on the parent and position:absolute on the child:
你想要的是通过使用position:相对于父级和位置:绝对子项:
It's not a beautiful solution but it does what you are after.
这不是一个美丽的解决方案,但它会做你想要的。