前回、フッタ固定の状態で全体をスクロールする方法を紹介しましたが、前回紹介した方法ではメインコンテンツがフッタの下に隠れてる状態になっています。
このやり方でも見た目上は問題ありませんが、全体スクロールと部分的なスクロールを分けたいときには対応できません。
今回は、そのメインコンテンツのみにスクロールバーを表示させて部分的なスクロールを可能にする方法を紹介したいと思います。
内部コンテンツのスクロール方法
- 基本となるHTML作成
- ヘッダ部のCSS設定
- 内部コンテンツのCSS設定
基本となるHTML作成
説明するために基本となるHTMLを作成して、それを元にしてCSSの設定を加えていきレイアウトを完成していきます。
<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset=“UFT-8”>
<title>ヘッダーを固定にするレイアウト</title>
</head>
<body>
<div class="header"> ヘッダ部 </div>
<div class="container">
<div class="content"> コンテンツ部 </div>
</div>
</body>
</html>ヘッダ部を固定設定（CSS）
ヘッダー部を黒背景にし、メインコンテンツは空色にします。前回に説明したヘッダ部を固定設定を行います。この設定だと、メインコンテンツをスクロールするとヘッダー部の下に隠れてスクロールすることになります。
.container {
/* top-padding:140px; */
display: flex;
overflow: auto;
height: calc(100vh - 140px);
margin-top: 140px;
}
/* ヘッダ */
.header {
top: 0px;
position: fixed; /* ヘッダーの固定 */
color: #ffffff;
width: 100%; /* 横幅100% */
height: 140px; /* 縦幅140px */
background-color:#444; /* 背景色(黒) */
}
/* メインコンテンツ */
.content {
display: block;
flex: 1;
height: 150vh; /* スクロールさせるために高さを150% */
background: #5f9cda;
}メインコンテンツのみスクロール設定（CSS）
ヘッダ部を固定にしたまま、メインコンテンツのみをスクロールバーを表示してスクロールを可能にする設定を行います。これを応用することで必要な場所にスクロールコンテンツを設置することが可能になります。
/* メインコンテンツ */
.content {
display: flex;
overflow: auto;
height: calc(100vh - 140px);
margin-top: 140px;
background: #5f9cda;
}メインコンテンツの表示高さを固定表示分の高さを引いたものにする
overflow設定を追加して、内容が表示領域を超える場合にスクロールバーを表示
overflow設定を追加して、内容が表示領域を超える場合にスクロールバーを表示
