私たちのウェブサイトの左側のナビゲーション バーのセットアップがあります。表示方法は、ナビゲーションの上部にヘッダー画像 (通常はクライアントの名前) を配置し、次に何をすべきかについての多数のオプションを保持するテーブルを配置することです。これらのオプションは、クライアントが何であるかによって異なります。このナビゲーションを表示すると、プライマリ テーブルの両側に 2 つの画像が表示され、境界線として使用されます。これらは、1 ピクセルずつの画像であるスキン可能な画像です。このように、CSS ファイルで同じ画像名を参照しながら、各クライアントのスキンを異なる色にすることができます。
これらのページに doc タイプを追加する前は、画像はページの下部またはテーブル内のコンテンツの下部のどちらか長い方まで伸びていました。現在、ページを標準にするためにドキュメントタイプを追加していますが、同じことを行うことはできません。
私の設定では、ヘッダー イメージを保持するヘッダーとして 1 つの DIV があります。次に、子として 3 つの DIV 要素を持つコンテナーとして DIV があります。最初と最後のものは左右の境界線として 1 ピクセルの画像を保持し、中央の div はコンテンツ テーブルを保持します。
ページ サイズが 100% + ヘッダー イメージのサイズになるため、境界線イメージの DIV を高さ 100% に設定することはできません。また、コンテンツがページ全体を占めていない場合は、ページ全体の長さである必要があるため、コンテンツの下部にある画像に頼ることはできません。ページのサイズを変更するときに、JavaScript を使用して DIV のサイズを計算する以外に、ここで何をすべきか途方に暮れています。
ちなみに、すべてのブラウザ向けに撮影しようとしているので、IE (少なくとも 9) と Chrome の両方が m テスト ケースです。ここにコードをリンクして、私の問題が何であるかを示します。ご覧のとおり、左、コンテンツ、および右の div がページの下部を超えて拡張されていますが、これは望ましくありません。
//HTML
<html>
<body>
<div class="NavHeader"> </div>
<div id="NavBody">
<div id="NavLeft"> </div>
<div id="NavContent"> <br> </div>
<div id="NavRight"> </div>
</div>
</body>
</html>
// CSS
html, body {
height: 100%;
}
.NavHeader {
height: 40px;
width: 100%;
background-color: blue;
}
#NavBody {
height: 100%;
}
#NavLeft {
height: 100%;
float: left;
background-color: black;
width: 1px;
}
#NavContent {
height: 100%;
float: left;
background-color: green;
}
#NavRight {
height: 100%;
float: right;
background-color: black;
width: 1px;
}