teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問width height 100%のdiv を position absoluteで縦に並べる方法

編集履歴

質問編集履歴

5

code

2016/10/05 12:13

投稿

HogeOne
HogeOne

スコア8

title CHANGED
File without changes
body CHANGED
@@ -2,11 +2,11 @@
2
2
 
3
3
  ```html
4
4
  <div id="wrapper">
5
- <div clsas="box">
5
+ <div class="box">
6
6
  </div>
7
7
  <div class="box">
8
8
  </div>
9
- <div clsas="box">
9
+ <div class="box">
10
10
  </div>
11
11
  <div class="box">
12
12
  </div>

4

code

2016/10/05 12:13

投稿

HogeOne
HogeOne

スコア8

title CHANGED
File without changes
body CHANGED
File without changes

3

code

2016/10/05 11:22

投稿

HogeOne
HogeOne

スコア8

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  width height 100%のdiv を position absoluteで縦に積み重ねたいのですが重なって表示されてしまいます。
2
2
 
3
- ------------------------------
3
+ ```html
4
4
  <div id="wrapper">
5
5
  <div clsas="box">
6
6
  </div>
@@ -11,7 +11,8 @@
11
11
  <div class="box">
12
12
  </div>
13
13
  </div>
14
+ ```
14
- -------------------------------
15
+ ```css
15
16
  #wrapper{
16
17
  position: relative;
17
18
  }
@@ -22,5 +23,6 @@
22
23
  height : 100vh;
23
24
  }
24
25
 
26
+ ```
25
27
 
26
28
  宜しくお願いします！

2

code

2016/10/05 11:03

投稿

HogeOne
HogeOne

スコア8

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,6 @@
1
1
  width height 100%のdiv を position absoluteで縦に積み重ねたいのですが重なって表示されてしまいます。
2
2
 
3
+ ------------------------------
3
4
  <div id="wrapper">
4
5
  <div clsas="box">
5
6
  </div>
@@ -10,13 +11,16 @@
10
11
  <div class="box">
11
12
  </div>
12
13
  </div>
13
-
14
+ -------------------------------
14
15
  #wrapper{
15
16
  position: relative;
16
- }
17
+ }
18
+
17
19
  .box {
18
20
  position: absolute;
19
21
  width: 100vw;
20
22
  height : 100vh;
21
23
  }
24
+
25
+
22
26
  宜しくお願いします！

1

code

2016/10/05 11:01

投稿

HogeOne
HogeOne

スコア8

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,22 @@
1
1
  width height 100%のdiv を position absoluteで縦に積み重ねたいのですが重なって表示されてしまいます。
2
2
 
3
+ <div id="wrapper">
4
+ <div clsas="box">
5
+ </div>
6
+ <div class="box">
7
+ </div>
8
+ <div clsas="box">
9
+ </div>
10
+ <div class="box">
11
+ </div>
12
+ </div>
3
13
 
14
+ #wrapper{
15
+ position: relative;
16
+ }
17
+ .box {
18
+ position: absolute;
19
+ width: 100vw;
20
+ height : 100vh;
21
+ }
4
22
  宜しくお願いします！