css - ページの高さのパーセントを使用して HTML 要素のマージンを設定するには?

Question

ページの先頭の 10% 下に配置したい div があります。この CSS ルールを使用する場合:

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

div の計算された margin-top は約 192px (私の画面解像度は 1920 x 1080) であるため、テストしたすべてのブラウザーは、値の計算にページの幅 (高さではなく) を使用しています。

CSSのみを使用して高さ(1080pxと仮定)を使用して計算するにはどうすればよいですか?

Answer 1

パーセンテージは、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 );