CSS を使用して、display:flex を使用して残りの垂直スペースを埋める

Question

<p>3 行レイアウトの場合: </p>

<li>一番上の行はその内容に応じてサイズ変更する必要があります</li> <li>一番下の行の高さはピクセル単位で固定されている必要があります</li> <li>中央の行がコンテナ全体に広がるように展開されます</li> </ul> <p>問題は、メイン コンテンツが拡張されると、ヘッダー行とフッター行が圧迫されてしまうことです。</p> <p><br /></p> <pre class="ブラシ:css;ツールバー:false;">セクション { ディスプレイ: フレックス; フレックスフロー: カラム; align-items: ストレッチ; 高さ: 300ピクセル; } ヘッダー { フレックス: 0 1 自動; 背景: トマト。 } ディビジョン { フレックス: 1 1 自動; 背景: ゴールド; オーバーフロー: 自動; } フッター { フレックス: 0 1 60ピクセル; 背景: ライトグリーン; /* フッターを修正します: min-height: 60px; */ }</pre> <pre class="brush:html;toolbar:false;"><section> <ヘッダー> ヘッダー: コンテンツに合わせたサイズ <br>(でも本当にそうなの?) </ヘッダー> <div> メインコンテンツ: 残りのスペースを埋めます
x
x
x
x
x
x
x
x
x
x
<!-- 壊れていることを確認するにはコメントを解除してください - -> x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
<!-- --> </div> <フッター> フッター: ピクセル単位の固定高さ </フッター> </section></pre> <p><br /></p> <p>ヴァイオリン:</strong></p>
<li>http://jsfiddle.net/7yLFL/1/ (実行中、内容は少ない)</li> <li>http://jsfiddle.net/7yLFL/ (破損した、大きなコンテンツ)</li> </ul> <p>幸運にも、レガシー ブラウザに関係なく、最新かつ最高の CSS を使用できるようになりました。フレックスレイアウトを使用して、古いテーブルベースのレイアウトを最終的に取り除くことができると思います。何らかの理由で、希望どおりに動作しません...</p> <p>記録のために、SO には「残りの高さを埋める」ことに関する関連する質問がたくさんありますが、どれも私が flex で抱えている問題を解決するものではありません。参照: </p>
<li>div の高さを残りの画面スペースに合わせます</li> <li>残りの垂直方向のスペースを埋める - CSS のみ</li> <li>コンテナを別の div と共有する場合、div はコンテナの残りの高さ/幅を埋めますか? </li> <li>ネストされた div を残りのコンテナ div の高さの 100% まで拡張します</li> <li>Flexbox レイアウトの垂直方向のスペースを 100% 占めるようにするにはどうすればよいですか? </li> <li>お待ちください</li> </ul>

Answer 1

次の例には、展開された中央コンポーネントのコンテンツが境界を超えた場合のスクロール動作が含まれています。さらに、中央コンポーネントはビューポート内の残りのスペースの 100% を占めます。

ここに jsfiddle

リーリー

この動作を示すために使用できる HTML の例

リーリー

Answer 2

シンプル: デモ

リーリー リーリー