Jak ustawić margines elementu HTML za pomocą procentu wysokości strony?

Question

Mam div, który chcę ustawić na 10% poniżej początku strony. Jeśli używam tej reguły CSS:

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

div obliczone margin-top jest około 192px (moja rozdzielczość ekranu wynosi 1920 x 1080), więc wszystkie przeglądarki I testowane są przy użyciu szerokość stronie (zamiast wysokości) do obliczania wartość.

Jak zrobić, aby obliczyć za pomocą wysokości (załóżmy 1080px) używając tylko CSS?

Answer 1

Korzystanie szerokość do obliczenia odsetek jest poprawne zachowanie. Nie można ustawić marginesu na podstawie procentowej wysokości.

Jedną z możliwości jest ustawienie position: absolute; top 10% na elemencie lub użycie JavaScript.

http://jsfiddle.net/g8Re6/

Answer 2

Procent jest brany z elementu, który jest zawijany w div. Zamiast tego możesz użyć javascript lub jQuery, aby ustawić wysokość div proporcjonalnie do wysokości strony.

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

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

Więc zrobiłbyś

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

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