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?

Accepted Answer

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/

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

Solution

Problem