[解決済み] 親ディバイスの高さを指定せずに、子ディバイスの高さを100%にする方法は？

質問

以下のような構成のサイトがあります。

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

左側がナビゲーション、右側がコンテンツdivです。コンテンツdivの情報はPHPで引っ張ってきているので、毎回違います。

どのページが読み込まれても、ナビゲーションの高さがコンテンツ div の高さと同じになるように、ナビゲーションを縦方向に拡大縮小するにはどうすればよいでしょうか。

解決方法は？

注意事項 : この回答は、Flexbox 標準に対応していないレガシー ブラウザに適用されます。最新のアプローチについては https://stackoverflow.com/a/23300532/1155721

を見てみることをお勧めします。 クロスブラウザーCSSでハック不要の等高線カラム .

基本的に、ブラウザと互換性のある方法でCSSを使用してこれを行うことは些細なことではありません（しかし、テーブルでは些細なことです）ので、適切なプリパッケージソリューションを自分で見つけてください。

また、高さを100％にするか、同じ高さにするかで答えが変わってきます。通常は同じ高さです。高さ100％の場合は、答えが少し違います。