HTMLでサイドメニューをスクロールさせる

Question

お世話になります。

現在HTMLを使用してサイドメニューとメインとなるページを表示するサイトを作成しています。
作成していて参考にしたサイトがあるのですが、そのサイトではサイドメニューとメインのページにそれぞれスクロールバーがついて、独立しているような感じになっています。
それを真似したいと思うのですが、やり方が全くわかりません。

検索するキーワード、もしくは参考となるソースを教えていただけませんでしょうか

よろしくお願いします。

参考にしたサイト

Answer 1

高さが指定されているボックスから中身がはみ出した場合にコンテンツをどのように表示するか、を指定するプロパティにoverflowというものがあります。
overflow:auto;とすれば溢れた場合に自動的にスクロールバーが表示されます。
overflow:scroll;の場合は溢れていなくても常にスクロールバーが表示されます。

参考にされたサイトをChrome開発者ツールで確認してみたところ、メニューとメインのブロックにoverflow-yが設定されていました。上記overflowが縦横両方のスクロールを制御するのに対して、overflow-yは縦方向のスクロールのみ制御するプロパティです。

このプロパティに注意して再度参考サイトに設定されているスタイルを研究してみましょう。

---追記---
すみません、冒頭で「高さが指定されているボックス」と書きましたが、「サイズが指定されているボックス」に読み替えてください。（overflowは縦横両方が関係するので…）

Comments

[satoshi501]

ありがとうございます。　一度それを参考にして作成してみます。

Answer 2

キーワードはcssプロパティのoverflowですかね。

サイドナビのulには常にスクロールが表示されるようにoverflow-y: scroll;が指定してあり、
メインコンテンツのほうには、要素が高さいっぱいになったときにスクロールが出るようにoverflow-y: auto;が指定してあります。
ちなみにメインには横のスクロールが出ないようにoverflow-x: hidden;の指定もあります。

Comments

[satoshi501]

ありがとうございます