Geek asks and answers

How to set HTML element marker using percentage of page height?

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

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

The calculated margin-top edge is approximately 192px (screen resolution is 1920 x 1080), so all the browsers I tested use the page width (not height) to calculate the value.

How can I make them compute using height (suppose 1080px) using only CSS?

+5
source share
2 answers

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

One possibility is to install position: absolute; top 10%on an element or use JavaScript.

http://jsfiddle.net/g8Re6/

+10

, div. javascript jQuery div .

$(window).height();   // returns height of browser viewport

$(document).height(); // returns height of HTML document

,

var documentHeight = $(document).height();
var percentageHeight = documentHeight * .1;

$("#div-block").height(percentageHeight );
+3

More articles:


All Articles