回答編集履歴
3
コード修正
test
CHANGED
|
@@ -19,7 +19,6 @@
|
|
|
19
19
|
.btn {
|
|
20
20
|
right: calc(10vw - (100vw - 100%) / 2);
|
|
21
21
|
}
|
|
22
|
-
|
|
23
22
|
.container {
|
|
24
23
|
width: 80vw;
|
|
25
24
|
}
|
2
コード修正
test
CHANGED
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
}
|
|
12
12
|
.container {
|
|
13
13
|
width: 80%;
|
|
14
|
-
margin: 0 auto;
|
|
15
14
|
}
|
|
16
15
|
```
|
|
17
16
|
あるいは、幅をvwで指定したい場合は、`100vw - 100%` でスクロールバーの幅が計算できるので、それを利用して、
|
1
コードの追記
test
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
ボタンの位置を`right: 10vw;`で指定していますが、
|
|
2
|
-
fixed はスクロールバーを除いた画面を基準に配置します。
|
|
2
|
+
fixed はスクロールバーを除いた画面幅を基準に配置します。
|
|
3
3
|
`right: 0;`と設定すればスクロールバーがあるときは、スクロールバーの左に位置することからもわかります。
|
|
4
|
-
それに対して、`.container`は`width: 80vw;`とvw単位で幅を設定しています。vw
|
|
4
|
+
それに対して、`.container`は`width: 80vw;`とvw単位で幅を設定しています。vwはスクロールバーも含む幅になります。
|
|
5
|
-
そのため、スクロールバーの有無によって、`.container`は変わらないのに、 ボタンの位置は変わるので、両者にずれが生じています。
|
|
5
|
+
そのため、スクロールバーの有無によって、`.container`の幅は変わらないのに、 ボタンの位置は変わるので、両者にずれが生じています。
|
|
6
6
|
|
|
7
7
|
対策としては、単位をvwではなく%(スクロールバーを除いた幅になる)で指定すればいいでしょう。
|
|
8
8
|
```css
|
|
9
9
|
.btn {
|
|
10
|
-
position: fixed;
|
|
11
10
|
right: 10%;
|
|
12
11
|
}
|
|
13
12
|
.container {
|
|
@@ -15,3 +14,14 @@
|
|
|
15
14
|
margin: 0 auto;
|
|
16
15
|
}
|
|
17
16
|
```
|
|
17
|
+
あるいは、幅をvwで指定したい場合は、`100vw - 100%` でスクロールバーの幅が計算できるので、それを利用して、
|
|
18
|
+
|
|
19
|
+
```css
|
|
20
|
+
.btn {
|
|
21
|
+
right: calc(10vw - (100vw - 100%) / 2);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.container {
|
|
25
|
+
width: 80vw;
|
|
26
|
+
}
|
|
27
|
+
```
|