Home/ Questions/Q 6236885
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T10:55:32+00:00

I have a situation where I am trying to make an element occupy 100%

  • 0

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.

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.

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    What you want can be achieved by using position:relative on the parent and position:absolute on the child:

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

    It’s not a beautiful solution but it does what you are after.

    • 0