Question on CSS % height

If I define a CSS as follows;

div {height: 50%;} 

Will this work across most modern desktop browsers (IE8+, FF, Safari) and mobile browser开发者_运维百科s (iPhone/iPad, etc)

Is there any need to specify the following 2 additional attributes for cross-browser support

min-height: 50%; height: auto;

I am asking this question in the context of fluid design (i.e. same page will scale for multiple devices...desktop/tablet/mobile)..So please let me know what should be the preferred approach.

No, you don't need those.

BUT: Height is only relative to the parent. And the parent by default has no height (more accurately it's the height of the children inside it).

So you need:

body,html { height: 100%; }

So specify a "starting" height, and you may need to keep the "height chain" alive as well.

The reason for min-height instead of height is that height is fixed - it can't get bigger than that no matter what is inside it. This may not work right. So instead people do min-height so it's as least as tall as they want, but is allowed to grow.

The trouble with min-height is that it doesn't work on all browsers.