<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>
