高さ 120 ピクセルのヘッダー、高さ 120 ピクセルのフッター、および最小高さ 600 ピクセルのメイン コンテンツを含む Web ページが必要ですが、ブラウザが高さ 840 ピクセルを超えて垂直方向に引き伸ばされた場合 (またはユーザーが「コントロール マイナス」でズームアウトした場合) " Firefox の場合)、ヘッダーとフッターのスペースを除いたすべての使用可能なスペースを埋めるために、本文を縦に伸ばします。
これが私が試したものです：
<header>This is the header.</header>
<div id="mainContent">This is the main content.</div>
<footer>This is the footer.</footer>
これはCSSです：
header { height: 120px; background: red; }
div#mainContent { min-height: 600px; height: 100%; background: green; }
footer { height: 120px; background: blue; }
完全なコードは次のとおりです。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
header { height: 120px; background: red; }
div#mainContent { height: 100%; background: green; }
footer { height: 120px; background: blue; }
</style>
</head>
<body>
<header>This is the header.</header>
<div id="mainContent">This is the main content.</div>
<footer>This is the footer.</footer>
</body>
</html>
私が求めている効果を達成する正しい方法は何ですか。
ありがとう。