I have a div which needs to be positioned statically / relatively. When it has both height and width defined in %, the browser (FF) ignores the height set and renders a very small div. However, when I set the height in px (approximately same calculated value), it works smoothly.
The width defined in % works perfectly.
I need the height to be defined in % as well - due to resolution / scaling issues.
You can emulate percents by manipulating the pixel heights of elements with JavaScript.
From http://reference.sitepoint.com/css/height :
Percentage values refer to the height of the element’s containing block. If the height of the containing block isn’t specified explicitly (that is, it depends on content height), and this element isn’t absolutely positioned, the percentage value is treated as auto. A percentage value is also treated as auto for table cells, table rows, and row groups.
Hope that helps.
Also, be aware of different browser behaviors when using percent values. (For example, just because 4x25% equals 100%, does not mean that your divs will take 100%.)