Search code examples
csslayoutfluid-layout

use vertical percentage for css - height: x%;

I am trying to make a fluid layout for an app and am having some trouble with using css for height percentages. It is using the horizontal size of the window to specify the height % when I want it to be getting this percentage from the vertical size of the window. Is this possible or am I out of luck?

width: x%;
height: y%;

x and y being the percentage that I want the element to be. Both are being determined by the horizontal size of the window, and I want each to use it's respective axis.

Solution

  • If you use JavaScript to update the absolute height of the parent node, height % begins to mean something. From playing around, a P or DIV as first generation child of the body ignores any CSS height%; Wrap it in something with an absolute height. If you don't know the height before hand, use an onload JS function to set it.