回答編集履歴
1
説明追記
answer
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
Bootstrap4なら `sticky-top` をサイドバーに設定すればいいでしょう。
|
|
2
|
+
高さを 100vh にしたいなら `vh-100` も追加してください。
|
|
3
|
+
CSSの設定は不要です。
|
|
2
4
|
|
|
3
5
|
```html
|
|
4
6
|
<div id="app" class="container-fluid">
|
|
5
7
|
<div class="row">
|
|
6
|
-
<div class="col-3 sticky-top side">
|
|
8
|
+
<div class="col-3 sticky-top vh-100 side">
|
|
7
9
|
</div>
|
|
8
10
|
<div class="col-9">
|
|
9
11
|
</div>
|
|
@@ -11,4 +13,6 @@
|
|
|
11
13
|
</div>
|
|
12
14
|
```
|
|
13
15
|
|
|
14
|
-
[位置ユーティリティ～Bootstrap4移行ガイド](https://bootstrap-guide.com/utilities/position#sticky-top)
|
|
16
|
+
[位置ユーティリティ～Bootstrap4移行ガイド](https://bootstrap-guide.com/utilities/position#sticky-top)
|
|
17
|
+
|
|
18
|
+
[サイズユーティリティ～Bootstrap4移行ガイド](https://bootstrap-guide.com/utilities/sizing#relative-to-the-viewport)
|