Come impostare il margine dell'elemento HTML usando la percentuale di altezza della pagina?

Question

Ho un div che voglio posizionare al 10% sotto l'inizio della pagina. Se io uso questa regola CSS:

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

computerizzata margin-top del div è di circa 192px (la mia risoluzione dello schermo è 1920 x 1080) in modo che tutti i browser che ho provato si utilizza la larghezza della pagina (invece di altezza) per il calcolo del valore.

Come posso fare per farle calcolare usando l'altezza (supponiamo 1080px) usando solo CSS?

Answer 1

Utilizzando la larghezza per calcolare la percentuale è un comportamento corretto. Non è possibile impostare un margine in base a una percentuale dell'altezza.

Una possibilità è impostare position: absolute; top 10% sull'elemento o utilizzare JavaScript.

http://jsfiddle.net/g8Re6/

Answer 2

La percentuale viene ricavata dall'elemento in cui è avvolto il div. È possibile invece utilizzare javascript o jQuery per impostare l'altezza del div in proporzione all'altezza della pagina.

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

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

Così si farebbe

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

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