CSS divのサイズは、ビューポートの罫線を基準にしていますか？

私はあるテキストとYouTubeのビデオを含むdivがあります。私はそれを灰色の背景を与えるためにCSSを使用しました。私はまた、上から4.4 em、左から1％の位置を設定し、それを幅98％にしました。私は、ブラウザのサイズやズームにかかわらず、divの下端を下から4.4 emにしたい。これどうやってするの？ CSSを使用することはできますか、またはJavascriptが必要ですか？ Javascriptコードを含む答えを返す場合は、jQueryを使用しないでください。CSS divのサイズは、ビューポートの罫線を基準にしていますか？

div { 
 
    position: absolute; 
 
    left: 1%; 
 
    width: 98%; 
 
    top: 4.4em; 
 
    background: grey; 
 
} 
 

 
body { 
 
    width: 100%; 
 
    color: white; 
 
}

EDIT: Here is my HTML: 
 

 
<div> 
 
    <h1>A Heading</h1> 
 
    YOUTUBE VIDEO HERE 
 
</div>

出典

2017-12-06 Unknown User

ようこそStackOverflow！私たちがCSSを手助けするためには、CSSとHTMLの両方を提供する必要があります。それがなければあなたの問題を再現することはできません。 ** **関連性の低いすべてのコード**を[**最小限で完全で検証可能な例**]（http://stackoverflow.com/help/mcve）に表示するように質問を更新してください。 HTMLがサーバーサイドで生成されている場合は、**出力**を投稿してください。詳細については、[**よくある質問をどうやるか**]（http://stackoverflow.com/help/how-to-ask）に関するヘルプ記事を参照して、サイトの[**ツアー**]（http://stackoverflow.com/tour）:) –

'top：4.4em;下：4.4em;左：1％; right：1％ ' –

これは、最小限の例ではまだ十分ではありません。これを言って、「em」はフォントサイズです。ビューポートのサイズに基づいて高さを計算するには、 'vh'のようなものを使う方が良いでしょう。あるいは単に 'padding' /' margin'を使ってください。 –

あなたは一番下に4.4emギャップをsimluateする透明な境界線を使用することができますか、あなたは "CALC（）" CSS機能https://www.w3schools.com/cssref/func_calc.asp

例を使用することができます：

height: calc(100vh - 4.4em);

出典

2017-12-06 22:49:17

8.8emにする必要がありますが、サイトで動作することをテストできるようになるとすぐに回答を受け付けます。 –

それは動作します。しかし、ちょっとした調整が必要でした。ありがとう！ –

CSS divのサイズは、ビューポートの罫線を基準にしていますか？

答えて

関連する問題