如何使用页面高度百分比设置HTML元素的边距？

Question

我有一个div，我想在页面开头的10％位置。如果我使用这个CSS规则：

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

div的计算margin-top大约是192px（我的屏幕分辨率是1920 x 1080），所以我测试的所有浏览器都使用页面的宽度（而不是高度）来计算值。

如何使用仅使用CSS的高度（假设1080px）进行计算？

Answer 1

使用宽度计算百分比是正确的行为。您无法根据高度的百分比设置保证金。

一种可能性是在元素上设置position: absolute; top 10%，或使用JavaScript。

http://jsfiddle.net/g8Re6/

Answer 2

百分比取自div所包含的元素。您可以使用javascript或jQuery设置di​​v的高度与页面高度成比例。

$(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 );