0

次の単純な構造があります。

<div id="container">
   <div id="header">...</div>
   <div id="menu">...</div>
   <div id="content">...</div>
   <div id="footer">...</div>
</div>

メニューとコンテンツの高さが同じである必要がありますが、一定に設定できません。両方のアイテムの「min-height」を「600px」に設定したところ、「コンテンツ」は 600px を超えましたが、「メニュー」は 600px になりました。どうすれば修正できますか？

4

2 に答える 2

0

IE6 と IE7 をあまり気にしない場合、最も簡単な答えは設定です

display: table-cell;

各列に。この純粋な CSS2.1 ソリューションについては、 http:
//ie7nomore.com/css2only/table-layout/を確認してください(両方の列は contenteditable であるため、1 つの列や別の列にテキストの行や行を簡単に追加できます)。一部の人が主張するように、「テーブルを使用する」のではなくtable、CSS プロパティの値はdisplayHTML 要素と同じようにレンダリングされますtableが、それは依然としてdiv(つまり、なし) またはそれが適用される要素のセマンティックです;)

次に、IE6 と IE7 の場合、単純なフォールバックに条件付きコメントを使用できます (列の 1 つに背景を適用し、一部のページでもう一方の背景が長い場合など... 気にしないで忘れてください。それは古い IE であり、テキストはまだ読み取り可能です) )

別の方法 (視覚的なトリック) は、模造柱のテクニックです。

于 2013-04-11T19:29:42.263 に答える