How to set HTML element's margin using percent of page height?

Question

I have a div that I want to position at 10% below the beginning of the page. If I use this CSS rule:

#div-block{
   margin-top: 10%;
}

The div's computed margin-top is approximately 192px (my screen resolution is 1920 x 1080) so all browsers I tested are using the page's width (rather than height) for calculating the value.

How can I do to make them calculate using the height (suppose 1080px) using only CSS?

Answer 1

Using the width to calculate the percentage is correct behavior. You cannot set a margin based on a percentage of the height.

One possibility is to set position: absolute; top 10% on the element, or use JavaScript.

http://jsfiddle.net/g8Re6/