フローティング枠を実装するコードと実行結果を紹介します。
フローティングの枠を実装するには、スクロールでスクロールアウトさせないために、スタイルに、"position:fixed;" を指定します。また、他の枠より上に表示される必要があるため、"z-index:1;"を指定し、最前面に表示します。
次のHTMLファイルを作成します。
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="FloatingBottom.css" />
</head>
<body>
<h1>ページです。</h1>
<p>コンテンツ1です。</p>
<p>コンテンツ2です。</p>
<p>コンテンツ3です。</p>
<div style="height:600px;background-color:#ffd800;">大きな枠です。</div>
<p>コンテンツ4です。</p>
<p>コンテンツ5です。</p>
<p>コンテンツ6です。</p>
<div style="height:400px;background-color:#b6ff00;">中サイズの枠です。</div>
<p>コンテンツ7です。</p>
<p>コンテンツ8です。</p>
<p>コンテンツ9です。</p>
<p>コンテンツ10です。</p>
<div class="BottomPanel">フローティング枠です。</div>
</body>
</html>
:root {
--panel-height: 64px;
}
body {
padding-bottom: var(--panel-height);
}
.BottomPanel {
z-index: 1;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: var(--panel-height);
background-color: #C0C0FF;
}
BottomPanel クラスがフローティング枠を定義するクラスです。
スクロールアウトを防ぐため position:fixed; を指定し、bottom:0,left:0,width:100%,height:64px の
指定により画面の下部幅いっぱいの高さ64pxのフローティング枠となります。
また、z-index:1;の指定により、フローティング枠は最前面で表示されます。
画面の下部が表示されない現象に対処するため、bodyのpadding-bottomをフローティング枠の高さと同じ値にしています。
この設定により、ページ最下部までスクロールした際に、末尾のコンテンツがフローティングパネルに隠されない動作になります。
フローティング枠の高さとbodyのpadding-bottomは同じ値にする必要があるため、:rootで変数として定義しています。
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
下にスクロールするとコンテンツはスクロールアウトしますが、「フローティング枠です」の枠はスクロールせずに画面の下端に表示され続けます。
画面の一番最下部までスクロールした状態が下図になります。画面下部までスクロールすると、最下部の「コンテンツ10」の項目がスクロールインすることが確認できます。~
別の実装方法としてGirdレイアウトを利用する方法があります。
同様の動作が実現できますが、スクロールバーの位置が異なり、ウィンドウではなく枠にスクロールバーが表示されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="FloatingBottomGrid.css" />
</head>
<body>
<div class="ContentPanel">
<h1>ページです。</h1>
<p>コンテンツ1です。</p>
<p>コンテンツ2です。</p>
<p>コンテンツ3です。</p>
<div style="height:600px;background-color:#ffd800;">大きな枠です。</div>
<p>コンテンツ4です。</p>
<p>コンテンツ5です。</p>
<p>コンテンツ6です。</p>
<div style="height:400px;background-color:#b6ff00;">中サイズの枠です。</div>
<p>コンテンツ7です。</p>
<p>コンテンツ8です。</p>
<p>コンテンツ9です。</p>
<p>コンテンツ10です。</p>
</div>
<div class="BottomPanel">フローティング枠です。</div>
</body>
</html>
:root {
--panel-height: 64px;
}
body {
padding: 0;
margin: 0;
display: grid;
height: 100vh;
grid-template-rows: 1fr auto;
}
.ContentPanel {
overflow: auto; /* ここだけスクロール */
padding: 1rem 1rem 1rem 1rem;
}
.BottomPanel {
height: var(--panel-height);
background-color: #C0C0FF;
}
グリッドレイアウトで上部のコンテンツエリアと下部のフローティングエリアに分割します。
ページ自体はスクロールしない状態にして、下部のフローティングエリアが常に表示される状態にします。
コンテンツ部分は、ContentPanel クラス内に overflow: auto; を指定して枠内がスクロールすることでコンテンツを表示する動作にします。
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
下にスクロールするとコンテンツはスクロールアウトしますが、「フローティング枠です」の枠はスクロールせずに画面の下端に表示され続けます。
画面の一番最下部までスクロールした状態が下図になります。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="FloatingBelow.css" />
</head>
<body>
<div>ページです。</div>
<p>コンテンツ1です。</p>
<p>コンテンツ2です。</p>
<p>コンテンツ3です。</p>
<div style="height:600px;background-color:#ffd800;">大きな枠です。</div>
<p>コンテンツ4です。</p>
<p>コンテンツ5です。</p>
<p>コンテンツ6です。</p>
<div style="height:400px;background-color:#b6ff00;">中サイズの枠です。</div>
<p>コンテンツ7です。</p>
<p>コンテンツ8です。</p>
<p>コンテンツ9です。</p>
<p>コンテンツ10です。</p>
<div class="BelowPanel">フローティング枠です。</div>
</body>
</html>
.BelowPanel {
z-index:1;
position:fixed;
left:0;
bottom:0;
width:100%;
height:64px;
background-color:#C0C0FF;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="FloatingBelow.css" />
</head>
<body>
<div>ページです。</div>
<p>コンテンツ1です。</p>
<p>コンテンツ2です。</p>
<p>コンテンツ3です。</p>
<div style="height:600px;background-color:#ffd800;">大きな枠です。</div>
<p>コンテンツ4です。</p>
<p>コンテンツ5です。</p>
<p>コンテンツ6です。</p>
<div style="height:400px;background-color:#b6ff00;">中サイズの枠です。</div>
<p>コンテンツ7です。</p>
<p>コンテンツ8です。</p>
<p>コンテンツ9です。</p>
<p>コンテンツ10です。</p>
<div class="BlankPanel"></div>
<div class="BelowPanel">フローティング枠です。</div>
</body>
</html>
.BelowPanel {
z-index:1;
position:fixed;
left:0;
bottom:0;
width:100%;
height:64px;
background-color:#C0C0FF;
}
.BlankPanel {
height:64px;
}
