挑戦する
2つのブロック要素が指定されます-1つは記事のテキスト（文書の幅の75％）、もう1つは最初の要素をナビゲートするためのリンクのリスト（25％、最初のブロックの左側にあります）。 テキストを含むブロックのコンテンツに応じて、記事を含む要素の高さは動的に設定されます。 ナビゲーションのある2番目のブロックの高さパラメーターの値が、記事のメインテキストを含む最初のブロックと同じであることを確認する必要があります。
技術仕様
以前は、テーブルタグのTABLE-TR-TDファミリを使用して同様のタスクが解決されましたが、このアプローチは、提示された情報の性質によるデータ自体がまったくなかったため、マークアップ（HTML）のデータ構造を定型化方法（CSS）から分離する原則に違反していました表形式ですが、ページ上で同様の表形式表示方法のみを使用しました。
<table> <tr> <td id=”navigation”> ... a-href ... </td> <td id=”content”> .. ... </td> </tr> </table>
その後、CSS標準は追加のテーブル、表示パラメーターのテーブルセル値で拡張されました。これにより、ページレイアウトのHTML構造で通常のDIV、SPAN要素を使用し、適切なcssルールを設定して、パーセントでレポートする列の形式で表の形式で表示できます幅と高さ：
<div id=”wrapper”> <div id=”navigation”> ... a-href ... </div> <div id=”content”> ... ... </div> </div>
#wrapper { display: table; } #navigation, #content { display: table-cell }
問題は解決されたように見えますが、残念ながら、このアプローチは古いバージョンのブラウザー（IE 6、IE 7）では機能せず、コーダーに他のアプローチを探すことを余儀なくされました。 互いにオフセットするネストされたラッパー要素の助けを借りたソリューションにより、同じ高さの列の視覚効果を実現できます。
<div id="bg-one"> <div id="bg-two"> <div id="navigation"> ... a-href ... </div> <div id="content"> ...... </div> </div> </div>
#navigation, #content { position: relative; float: left; left: -50%; } #navigation { width: 50%; } #bg-one, #bg-two { position:relative; float: left; width: 100%; background-color: #9988ff; } #bg-one { overflow: hidden; } #bg-two { left: 50%; background-color: #99ff99; }
ここでの列の役割は、タグ（＃bg-one、＃bg-two）をラップすることによって実行されます。タグの数は、タグに含まれるコンテンツ（＃content、＃navigation）を複製します。 この手法はIE 6でも機能しますが、大きな欠点は、列テキスト（＃content、＃navigation）でタグをラップする多数の追加要素（＃bg-one、＃bg-two）を追加する必要があることです。 そのようなラッパー要素の数（＃bg-N）は、テキストの列を持つ実際のブロックタグの数に等しくなります。 上記の例で、＃navigationおよび#contentと同じレベルに別の列（たとえば#advertisement）を追加するには、もう1つの一般的なラッピング要素bg-threeを追加する必要があります。
<div id="bg-one"> <div id="bg-two"> <div id="bg-three"> <div id="navigation"> .. a href... </div> <div id="content"> .. .... </div> <div id="advertisement"> ... ... </div> </div> </div> </div>
#navigation, #content, #advertisement { position: relative; float: left; left: -64%; } #navigation,#content { width: 32%; } #bg-one, #bg-two, #bg-three { position: relative; float: left; width: 100%; background-color: #9988ff; } #bg-one { overflow: hidden; } #bg-two { left: 32%; background-color: #99ff99; } #bg-three { left: 32%; background-color: #a0a0a0; }
この場合、htmlマークアップははるかに複雑です-ラッピングタグが存在する理由は明らかではありません。 したがって、マークアップの可読性が低いためにhtmlテーブルを放棄すると、さらに読みにくいコードになります。 状況は、ラッピングタグを列で1レベル移動することで改善できます。
<div id="wrapper"> <div id="navigation-bg"></div> <div id="navigation"> .. a href.. </div> <div id="content-bg"></div> <div id="content"> ... ... </div> </div>
#wrapper{ position: relative; float: left; width: 100%; } #navigation, #content { position: relative; float: left; width: 50%; } #navigation-bg { position: absolute; left: 0; width: 50%; height: 100%; background-color: #ffaaaa; } #content-bg { position: absolute; left: 50%; width: 50%; height: 100%; background-color: #aaffaa; }
この場合、背景を持つ要素（＃navigation-bg、＃content-bg）は列テキストを含むタグの前に配置され、マークアップの理解が大幅に向上します。 しかし、残念なことにIE 6は絶対配置のブロック要素の高さパラメーターで指定されたパーセント値を理解せず、最新バージョンのブラウザーではdisplay：tableルールをサポートします。これにより、列の背景を含む追加のdiv要素が回避されます（上記の例では＃content-bg 、＃navigation-bg）。
解決策
タスクを読むと、その後のdisplay：table cssルールのアプリケーションに注目したテキストのマークアップにも1つの追加タグが含まれていることがわかります。
<div id=”wrapper”> <nav class=”shakespeare”> ... ... </nav> <article class=”shakespeare”> ... ... </article> </div>
#wrapper { display: table; } .shakespeare { display: table-cell; background-color: #f0f0f0; }
実際、このバージョンでは、列の高さの依存性は双方向です。つまり、navタグで指定されたブロックの高さはarticleタグで指定されたブロックの高さに依存します。逆も同様です。記事ブロックはnavブロックの高さに依存します。 この場合、navブロックの高さのみを長い記事タグの高さに調整する必要がありますが、逆の関係は不要です。
<article> <aside> ... ... </aside> .. </article>
article { position: relative; display: block; width: 75%; left: 25%; background-color: #8888FF; } aside { position: absolute; display: block; width: 33%; left: -33%; height: 100%; background-color: #F88888; }
絶対要素とdisplay：テーブルのパーセント値は、IEブラウザーで8番目のバージョンからのみ機能します。 CSSでは、絶対値を持つ要素の座標と寸法は、位置パラメータの非静的（相対、絶対、固定）値を持つ最初の親要素からカウントされるため、脇ブロックの幅と長さの値は、記事ブロックのサイズに関連する計算から取得されます。 つまり、脇のコンテナの記事ブロックの幅（ドキュメントの幅の75％）は100％であり、割合を構成します。
75% - 100% 25% - ?
私たちは得る
25% * 100% / 75% = 33.33%
これは、記事ブロックの割合での無料画面の25％です。
したがって、余分なラッパー要素を取り除き、コード内のある列の別の列への依存を表示し、非表データの表配置方法に頼ることはできません。