4
display:flexを使用して、残りの垂直スペースをCSSで埋めます
3列レイアウトの場合: 上の行はその内容に応じてサイズを調整する必要があります 下の行はピクセル単位で固定された高さでなければなりません 真ん中の行はコンテナを埋めるために拡大する必要があります 問題は、メインコンテンツが展開すると、ヘッダーとフッターの行が圧縮されることです。 HTML: <section> <header> header: sized to content <br>(but is it really?) </header> <div> main content: fills remaining space<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> <!-- uncomment to see it break - -> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> <!-- --> </div> <footer> footer: fixed height in px </footer> </section> CSS: section { …