回答編集履歴
2
コード修正
test
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
```html
|
|
28
28
|
|
|
29
|
-
<body
|
|
29
|
+
<body>
|
|
30
30
|
|
|
31
31
|
<div id = "app">
|
|
32
32
|
|
1
コード追記
test
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
- 高さの%指定は親要素の高さを基準とした相対値になりますので、親要素に高さを指定する必要がある
|
|
18
18
|
|
|
19
|
-
→ すべての親要素に`height: 100%`を指定しましょう。
|
|
19
|
+
→ すべての親要素に`height: 100%`を指定しましょう。(html, bodyも含む)
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
|
@@ -55,10 +55,6 @@
|
|
|
55
55
|
body {
|
|
56
56
|
|
|
57
57
|
height: 100%;
|
|
58
|
-
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.body-tag {
|
|
62
58
|
|
|
63
59
|
width: 100%;
|
|
64
60
|
|
|
@@ -99,3 +95,45 @@
|
|
|
99
95
|
```
|
|
100
96
|
|
|
101
97
|
分かりやすいように背景色と境界線を追加してます。
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
---
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
高さを%指定すると画面の高さにするのにすべての親要素に対して`height: 100%`する必要があり、入れ子構造が深いと面倒です。その場合、`vh`という単位を使うと一か所のみ指定ですみます。
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
```css
|
|
110
|
+
|
|
111
|
+
body {
|
|
112
|
+
|
|
113
|
+
margin: 0;
|
|
114
|
+
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
#app {
|
|
118
|
+
|
|
119
|
+
background-color: lightcyan;
|
|
120
|
+
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.all {
|
|
124
|
+
|
|
125
|
+
height: 100vh;
|
|
126
|
+
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.head {
|
|
130
|
+
|
|
131
|
+
height: 20%;
|
|
132
|
+
|
|
133
|
+
border: 1px solid;
|
|
134
|
+
|
|
135
|
+
box-sizing: border-box;
|
|
136
|
+
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
```
|