backgroundにグラデーションカラーを指定したい

前提・実現したいこと

https://www.youtube.com/watch?v=JDiurjhpOXA
このページの電卓を模写しています。

7:27時点までは意図通りに動作します

背景色を動画通りに反映させるにはどうすればよいでしょうか？

環境
Macbook air　early2015 macOS Mojave ver.10.14.6
VS code
chrome ver.83.0.4103.61
VS codeのライブビュー機能使用

発生している問題・エラーメッセージ

bgクラスにheight100%で背景色を指定したいのですが、値を指定しても背景が白のまま反応がありません。

Invalid property value

bgクラスのスタイルに検証ツールにて上記の表記があります。

該当のソースコード

html,css,js
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <script>
6      function insert(num) {
7        document.form.textview.value = document.form.textview.value + num;
8      }
9      function equal() {
10        var exp = document.form.textview.value;
11        if (exp) {
12          document.form.textview.value = eval(exp);
13        }
14      }
15      function clean() {
16        document.form.textview.value = "";
17      }
18      function back() {
19        var exp = document.form.textview.value;
20        document.form.textview.value = exp.substring(0, exp.length - 1);
21      }
22    </script>
23    <style>
24      * {
25        margin: 0;
26        padding: 0;
27      }
28      .button {
29        width: 50px;
30        height: 50px;
31        font-size: 25px;
32        margin: 2px;
33        cursor: pointer;
34        background-color: rgb(153, 152, 152);
35        border: none;
36        color: white;
37      }
38      .textview {
39        width: 210px;
40        margin: 5px;
41        font-size: 25px;
42        padding: 5px;
43        border: none;
44        color: rgb(153, 152, 152);
45      }
46      .main {
47        position: absolute;
48        top: 50%;
49        left: 50%;
50        transform: translateX(-50%) translateY(-50%);
51      }
52      /* 問題の箇所 */
53      .bg {
54        background-color: linear-gradient(to right, red, blue);
55        height: 100%;
56      }
57    </style>
58    <title>Calculator</title>
59  </head>
60  <body>
61    <div class="bg"></div>
62    <div class="main">
63      <form name="form">
64        <input name="textview" class="textview" />
65      </form>
66      <table>
67        <tr>
68          <td>
69            <input class="button" type="button" value="C" onclick="clean()" />
70          </td>
71          <td>
72            <input class="button" type="button" value="<" onclick="back()" />
73          </td>
74          <td>
75            <input
76              class="button"
77              type="button"
78              value="/"
79              onclick="insert('/')"
80            />
81          </td>
82          <td>
83            <input
84              class="button"
85              type="button"
86              value="×"
87              onclick="insert('*')"
88            />
89          </td>
90        </tr>
91        <tr>
92          <td>
93            <input class="button" type="button" value="7" onclick="insert(7)" />
94          </td>
95          <td>
96            <input class="button" type="button" value="8" onclick="insert(8)" />
97          </td>
98          <td>
99            <input class="button" type="button" value="9" onclick="insert(9)" />
100          </td>
101          <td>
102            <input
103              class="button"
104              type="button"
105              value="-"
106              onclick="insert('-')"
107            />
108          </td>
109        </tr>
110        <tr>
111          <td>
112            <input class="button" type="button" value="4" onclick="insert(4)" />
113          </td>
114          <td>
115            <input class="button" type="button" value="5" onclick="insert(5)" />
116          </td>
117          <td>
118            <input class="button" type="button" value="6" onclick="insert(6)" />
119          </td>
120          <td>
121            <input
122              class="button"
123              type="button"
124              value="+"
125              onclick="insert('+')"
126            />
127          </td>
128        </tr>
129        <tr>
130          <td>
131            <input class="button" type="button" value="1" onclick="insert(1)" />
132          </td>
133          <td>
134            <input class="button" type="button" value="2" onclick="insert(2)" />
135          </td>
136          <td>
137            <input class="button" type="button" value="3" onclick="insert(3)" />
138          </td>
139          <td rowspan="5">
140            <input
141              class="button"
142              type="button"
143              style="height: 110px;"
144              value="="
145              onclick="equal()"
146            />
147          </td>
148        </tr>
149        <tr>
150          <td colspan="2">
151            <input
152              class="button"
153              type="button"
154              value="0"
155              onclick="insert(0)"
156              style="width: 110px;"
157            />
158          </td>
159          <td>
160            <input
161              class="button"
162              type="button"
163              value="."
164              onclick="insert('.')"
165            />
166          </td>
167        </tr>
168      </table>
169    </div>
170  </body>
171</html>
172

試したこと

・mainクラスにbackgroundで背景色を指定→ mainの背景に反映
・bgクラスdivタグとセレクタの確認、背景をredとしてみる→ エラーは消えるが反映されず

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

回答1件

ベストアンサー

下記でどうでしょうか。

css
1     .bg {
2        background: linear-gradient(to right, red, blue);
3        height: 100vh;
4      }

linear-gradientを設定するのは ackground-color:ではなく、background:です。
また、親要素(この場合はbody)の高さが0なので height: 100%; にしてもbgの高さは0です。
画面の高さにするなら、height: 100vh; とします。

投稿2020/05/24 08:54