レスポンシブのページレイアウトでよく迷うので
固定ヘッダー、最下部フッター、2カラム以上の組み方のサンプルを記載。
なお、PC閲覧として以下に対応
・IE 11
・Edge (EdgeHTML、非Chromium)
・Edge (Chromium)
・Chrome
・Firefox
※ IE や EdgeHTML は企業内などで使われているため、全くの無視はできないと思っている。
他、iPad / iPhone の Safariも問題ない。Mac Safariも問題ない（はず）
bootstrap 4 を使ってますが、個別cssで定義したい場合もbootstrapのcssを参考にすれば組める。
サンプルのカラム分けは、グリッドシステムで 3:9 の割合とした。グリッドを使うので3カラム以上でも対応できる。
まずは、サイド部分とメイン部分が同じ背景色でも良い場合のパターン。
分かりやすい様に各ブロック要素に別々の背景色を付けている。実際には各要素の配色を同じにすることで体裁を合わせる。
ヘッダーは fixed-top で固定
フッターは mt-auto で最下部に張付く
コンテンツ部分は flex-shrink-0 にして、フッターまでのスペースは flex-grow-1 で引き延ばす。
flex-growで引き延ばしするため、親要素 (html, body) には、h-100 vh-100 を定義しておく。
サンプルでの黄色の領域 (flex-grow-1) は、コンテンツ量がブラウザの高さに満たない時に現れる。
注: 固定ヘッダーのため、コンテンツ部に上側のパディングが必要になる。
先頭の「サイド」と「メイン」という文字が欠けているのは上側のパディングが足りないためで、ここのパディング調整は2番目の div の pt-5 の部分。具体的にはヘッダーの高さに合うようにパディングを決めて個別指定する。
row配下の各カラムでパディング調整することもできるが、その場合プレークポイントを割って縦１列表示になったときに余計な空白として現れるため、パディングを無くす工夫が必要になる。
3:9 で右側をメインとしている時、縦１列表示になった時にサイド部分が上に来るので、メイン部分が上に来るように order で表示順を入れ替えている。
サンプル デモ１ コード
次に、サイド部分とメイン部分を違う色で、帯のようにフッターまで延ばすパターン。
コンテンツの下の領域は、flex-growの中に高さ100% (h-100) を与え、コンテンツ領域と同じカラム幅でサイド部分とメイン部分を用意する。
注: 内部に固定幅 (width, min-width, max-width 等) を入れる場合には、幅ズレが起きないように注意する。
サンプル デモ２ コード
上のデモ１ コードの flex-grow 部分からの変更のみ。
最初の div は、ブレークポイントで縦１列になった時に現れる領域。
ブレークポイント以上の場合は非表示にするため d-md-none を付与。
ここの背景色は、コンテンツの表示上での最下方と同じ色にしておく。（サンプルとしてはサイド部分の灰色）
次の div は、先の div とは逆に、縦１列の場合は非表示にし、ブレークポイント以上の場合に現れる領域。
ここの背景色は、コンテンツのカラムと同じ配色にする。
これまで、ヘッダー / フッターは container-fluid で幅一杯にしたが、container (-fluid 無し)を使う事でコンテンツ幅に収めることも出来る。
ナビゲーションバーのカスタマイズは別の機会に投稿したいと思います。
コメントする