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

Question

我有一个 div，我想将其放置在页面开头下方 10% 的位置。如果我使用这个 CSS 规则：

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

div 的计算边距顶部约为 192 像素（我的屏幕分辨率为 1920 x 1080），因此我测试的所有浏览器都使用页面的宽度（而不是高度）来计算值。

我怎样才能让他们仅使用 CSS 使用高度（假设为 1080 像素）进行计算？

Answer 1

使用宽度来计算百分比是正确的行为。您不能根据高度的百分比设置边距。

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

http://jsfiddle.net/g8Re6/

Answer 2

百分比取自包含 的元素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 );