ウィンドウに合わせて #body を伸張させてほしい

メッセージ

現在の標準スキンでは、「ヘッダー」「コンテンツおよびメニューバー」「フッター」が上詰めで配置されている。
この仕様には次の問題がある。

  1. コンテンツやメニューの内容が少ない(画面全体の高さがウィンドウの高さより低い)場合、画面が上に寄ってしまって見栄えが悪い。また、フッター位置がウィンドウ最下部に統一されず、使い勝手が悪い。
  2. ウィンドウいっぱいに伸張するプラグインを作れない。「領域をできる限り広くしたいが、スクロールまではさせたくない」フレキシブルな高さの指定ができない(「height:100%」にしても、#body が上詰めで自身の高さを持たないため意味がない)。

これらの問題を解消するため、#body をウィンドウの高さいっぱいにストレッチさせてほしい。
具体的には、たとえば次のように flex 等の指定を追加することで実現できる(あくまで例であり、現標準スキンにそのまま追加するとレイアウトが微妙に崩れる)。

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

#contents {
  flex: 0 100 100%;
}

#body {
  display: flex;
  flex-direction: column;
  flex: 0 100 100%;
}



トップ   編集 凍結 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2022-01-20 (木) 07:33:17
Site admin: PukiWiki Development Team

PukiWiki 1.5.4+ © 2001-2022 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u12. HTML convert time: 0.253 sec.

OSDN