Divはコンテンツと同じくらいの高さです

Question

私はdivはコンテンツの高さにすぎないと言いました。

<div class="body-container"> 
    <p>Hello</p> 

    </div> 

とCSS：
body-container { width: 100%; height: 100%; background-color: blue; }
しかし、背景が唯一のHello段落に表示されます私はdiv要素を持っています。私はバックグラウンドでページ全体をカバーしたいので、これは大変面白いです！助けてくれてありがとう。

Answer 1

まず、あなたは.body-containerのように、その前にドットを追加することで、クラスのスタイル。

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.body-container { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: blue; 
 
}

<div class="body-container"> 
 
    <p>Hello</p> 
 

 
</div>

：あなたの問題については、同様に、フルサイズを取るために .body-containerためにも、幅と高さ 100%の持っている必要があります .body-container、 htmlと bodyに 100%の高さと幅を設定することで

ます。また、ビューポート単位vhとvwを使用してフルサイズを強制することができます。

.body-container { 
 
    width: 100vw; /* 1vw = 1% of screen width */ 
 
    height: 100vh; /* 1vh = 1% of screen height */ 
 
    background-color: blue; 
 
}

<div class="body-container"> 
 
    <p>Hello</p> 
 

 
</div>

Answer 2

てみ変更heightプロパティはに：

height: 100vh;