html - ウィンドウの幅\高さを変更するときに自動サイズ変更を行う div

Question

私はどこでも見てきました。非常に「基本的な」アイデアのサンプルコードを思い付くことができませんでした:

画面サイズの 90% を占める div で、ブラウザーのサイズが変更されるたびに (相対的な画面の 90% を占めるように) 自動的に調整されます。

その中にネストされた div も同様にサイズ変更する必要があります。

それは可能ですか？

編集：

画面を縦方向にサイズ変更しようとすると、幅 90% が機能しません。

Answer 1

vh 属性を使用します。これはビューポートの高さを意味し、パーセンテージです。したがって、height: 90vh は、ビューポートの高さの 90% を意味します。これは、ほとんどの最新のブラウザーで機能します。

例えば。

div {
  height: 90vh;
}

残りのばかげた 100% の身体への負担をなくすことができます。

ヘッダーがある場合は、CSS の calc 関数を使用してヘッダーを考慮するなどの楽しいこともできます。

例えば。

div {
  height: calc(100vh - 50px);
}

これにより、ビューポートの高さの 100% からヘッダーの 50px を差し引いたものになります。