CSSのみでブラウザーのサイズに応じてコンテンツエリアを調整する方法をご教示いただきたいです。

前提・実現したいこと

HTML, CSS（SCSS）を使って、ブラウザーをスクロール無しで１画面で全てが見れるようなページを作っています。

添付画像のようにHeaderの大きさは固定でブラウザーのサイズに合わせてBox（div）の大きさを変更したいと思っているのですが、なかなか上手くCSSが書けません。

Javascriptを用いると可能なのは承知なのですが、CSSのみで実現したいと考えています。可能でしょうか？

該当のソースコード

CSS
1html, body {
2    height: 100vh;
3    box-sizing: content-box;
4    margin: 0;
5}
6
7.header {
8    position: relative;
9    height: 100px;
10    width: 100%;
11    background-color: brown;
12    overflow: auto;
13}
14
15.content {
16    background-color: aqua;
17    width: 100%;
18    overflow: auto;
19　　 top: 0;
20    bottom: 0 -> 画面の下までコンテンツエリアが伸ばせたら理想的なのですが方法はありますか？
21}
22
23.box {
24    background-color: blueviolet;
25    margin: 2rem;
26}

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="header">
11        <h1>ヘッダー </h1>
12    </div>
13    <div class="content">
14        <h1>コンテンツ</h1>
15        <div class="box">
16            <h1>ボックス</h1>
17        </div>
18    </div>
19</body>
20</html>

CSS SCSS HTML

y_waiwai

2021/10/09 22:19

質問文は編集できます無駄に質問建てないで、追記修正しよう

ga-ca

2021/10/10 13:34

ご指摘ありがとうございます。エラーが発生し投稿操作を複数回行ったところ同じ質問が何個も投稿されてしまいました。運営に削除依頼を出しています。

行動規範の内容に同意します

回答1件

ベストアンサー

.content には calc で画面高からヘッダーの高さを引いた高さを設定。
flexで縦並びにして、.box には height: 100%; を設定して余白なしに拡張するようにします。

css
1.content {
2    background-color: aqua;
3    width: 100%;
4    overflow: auto;
5  /* 以下追加 */
6    height: calc(100vh - 100px);
7    display: flex;
8    flex-direction: column;
9    align-items: stretch;
10  /* ここまで */
11}
12
13.box {
14    background-color: blueviolet;
15    margin: 2rem;
16    height: 100%; /* 追加 */
17}