回答編集履歴
2
コード修正
answer
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
上記の点を修正すると、
|
|
13
13
|
|
|
14
14
|
```html
|
|
15
|
-
<body
|
|
15
|
+
<body>
|
|
16
16
|
<div id = "app">
|
|
17
17
|
<div class = "all">
|
|
18
18
|
<div class = "head">
|
1
コード追記
answer
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
→ タグのidをclassに変更するか、セレクタをid指定に変更
|
|
8
8
|
|
|
9
9
|
- 高さの%指定は親要素の高さを基準とした相対値になりますので、親要素に高さを指定する必要がある
|
|
10
|
-
→ すべての親要素に`height: 100%`を指定しましょう。
|
|
10
|
+
→ すべての親要素に`height: 100%`を指定しましょう。(html, bodyも含む)
|
|
11
11
|
|
|
12
12
|
上記の点を修正すると、
|
|
13
13
|
|
|
@@ -27,8 +27,6 @@
|
|
|
27
27
|
html,
|
|
28
28
|
body {
|
|
29
29
|
height: 100%;
|
|
30
|
-
}
|
|
31
|
-
.body-tag {
|
|
32
30
|
width: 100%;
|
|
33
31
|
margin: 0;
|
|
34
32
|
}
|
|
@@ -48,4 +46,25 @@
|
|
|
48
46
|
box-sizing: border-box;
|
|
49
47
|
}
|
|
50
48
|
```
|
|
51
|
-
分かりやすいように背景色と境界線を追加してます。
|
|
49
|
+
分かりやすいように背景色と境界線を追加してます。
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
高さを%指定すると画面の高さにするのにすべての親要素に対して`height: 100%`する必要があり、入れ子構造が深いと面倒です。その場合、`vh`という単位を使うと一か所のみ指定ですみます。
|
|
54
|
+
|
|
55
|
+
```css
|
|
56
|
+
body {
|
|
57
|
+
margin: 0;
|
|
58
|
+
}
|
|
59
|
+
#app {
|
|
60
|
+
background-color: lightcyan;
|
|
61
|
+
}
|
|
62
|
+
.all {
|
|
63
|
+
height: 100vh;
|
|
64
|
+
}
|
|
65
|
+
.head {
|
|
66
|
+
height: 20%;
|
|
67
|
+
border: 1px solid;
|
|
68
|
+
box-sizing: border-box;
|
|
69
|
+
}
|
|
70
|
+
```
|