【CSS】可変するWebページで要素の高さを常に100%にしたい

前提・実現したいこと

Webページの内容が増えてスクロールが発生した際に、CSSが途切れてしまうので、スクロールしてもCSSが付いてくるようにしたいです。
下記コードClass aのように高さのある要素が追加された場合でも、mainとsideの背景色が画面いっぱいに表示されるのが理想です。

該当のソースコード

HTML
1    <div class="wrapper">
2
3        <div class="main">
4        <p>メイン</p>
5    
6        <div class="a">
7            a
8        </div>
9
10        </div>
11
12        <div class="side">
13        <p>サイドバー</p>
14        </div>
15
16    </div>

CSS
1html {
2    height: 100%;
3}
4
5body {
6    height: 100%;
7}
8
9.wrapper {
10    display: flex;
11    background-color: grey;
12    height: 100%;
13}
14
15.main {
16    background-color: blue;
17    width:80%;
18}
19
20.a {
21    height:9999px;
22}
23
24.side {
25    background-color: red;
26    width: 20%;
27}

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

回答1件

ベストアンサー

やりたいことは、下記のようなことでしょうか。

.wrapperにmin-height: 100vh;を設定することで、中身の高さが画面高以下でも画面一杯に表示されて、中身が画面高より高い場合は、スクロールしても背景色は途切れません。

css
1body {
2  margin: 0;
3}
4
5.wrapper {
6  display: flex;
7  background-color: grey;
8  min-height: 100vh;
9}
10
11.main {
12  background-color: blue;
13  width: 80%;
14}
15
16.a {
17  height:9999px;
18}
19
20.side {
21  background-color: red;
22  width: 20%;
23}