CSS を使用したスティッキー サイドバー付きのスクロール可能なコンテンツ

964 ワード
css html tutorial design テキストリンク
この投稿では、スクロール可能なコンテンツとスティッキー/固定サイドバーを使用してページを作成する方法を簡単に説明します.

3 つの div、1 つの親 div、つまりコンテナーを作成し、残りの 2 つはコンテンツとサイドバー用です.

<div class='container'>
   <div class='content'>
   </div>
   <div class='sidebar'></div>
</div>


グリッドとしてディスプレイを使用してタスクを達成します.CSS は以下のとおりです.

.container {
display: grid;
gap: 0 1rem;
grid:
"header side" auto
"inside side" auto
"content side" auto
"footer side" auto / auto 16rem;
margin: 0 auto;
max-width: 50rem;
padding: 1rem;
position: relative;
}
.content {
grid-area: content;
}
.side {
grid-area: side;
margin-top: 1.5rem;
position: fixed;
right: calc(50% - 28.5rem);
top: 0;
width: 15rem;
}


それだけです.必要な HTML を content と side div にそれぞれ追加するだけです.

Happy Coding, Thanks!

【Ruby】each_charメソッドについて
rails6 Bootstrapテンプレートでのエラー