HTMLタグのラップ画面（デフォルト）+コンテンツ（オーバーフローの場合）

Question

ウェブページですべてのコンテンツをラップするようにしたい場合は、htmlタグのプロパティーをwidthのままにしてくださいheightはコンテンツに自動的に適応します。

私の場合、コンテンツは動的なので、ウェブページにどれくらいのアイテムがあるかによって異なります。ウェブページはそれらをすべてラップする必要があります。

コンピュータの画面の100％をオーバーフローさせる項目が十分ある場合、ウェブページがその内容に自動的に適応するため問題はありませんが、コンピュータの画面の100％ htmlタグはそれを覆うことなくいくらかのスペースを残すので、コンテンツにのみ適合します。

コンテンツが画面の100％を超える場合はウェブページがそれに適応し、コンテンツが100％未満の場合はhtmlタグが対象となりますフルスクリーン（私がheight: 100%;を設定したかのように）。ここで

いくつかの例：

• Example 1：すべてのコンテンツをカバー。 >OK。
• Example 2。コンテンツのみをカバーし、フルスクリーンはカバーしません。 >NOT OK。
• Example 3。コンテンツが100％スクリーンよりも小さい場合、全画面をカバーします。 >OK。
• Example 4。フルスクリーンではなく完全なコンテンツをカバーしています。 >NOT OK。 Example 1とExample 2がheight: 100%;財産とExample 3とExample 4それを持っていることを持っていないこと
は

注意してください。

私のCSSのプロパティを設定して、htmlタグが（デフォルトで）画面とコンテンツ（オーバーフローした場合）の両方をカバーするようにするにはどうすればよいですか？

ありがとうございます！

Answer 1

最良の方法は、ユニットとしてvhでmin-heightを使用することです：

#container{ 
    display: flex; 
    min-height: 100vh; 
    background-color: blue; 
} 

JSFiddle

しかし、vhブラウザのサポートを意識する - caniuseとMDN。