Sayfa öğesinin yüzdesi kullanılarak HTML öğesinin kenar boşluğu nasıl ayarlanır?

Question

Sayfanın başına% 10 altında konumlandırmak istediğim bir div var. Bu CSS kuralını kullanıyorsanız:

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

div bilgisayarlı margin-top yaklaşık 192px (benim ekran çözünürlüğü 1920 x 1080'dir) Ben hesaplanması için sayfanın genişliğini (ziyade yüksekliğinden daha) kullanıyorsanız test nedenle tüm tarayıcılar değer.

Yalnızca CSS kullanarak yüksekliği (1080px varsayalım) kullanarak hesap yapmak için nasıl yapabilirim?

Answer 1

yapardı. Bir kenar boşluğunun yüzdesine göre bir kenar boşluğu ayarlayamazsınız.

Bir olasılık, öğeye position: absolute; top 10%'u ayarlamak veya JavaScript'i kullanmaktır.

http://jsfiddle.net/g8Re6/

Answer 2

Yüzdesi, div öğesinin içerdiği öğeden alınmıştır. Bunun yerine, sayfanın yüksekliğini sayfa yüksekliğine göre ayarlamak için javascript veya jQuery kullanabilirsiniz.

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

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

Yani oran doğru davranıştır hesaplamak için genişliği kullanma

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

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