3カラムレイアウトの最後に著作権などの情報を入れるフッター行を追加したい場合。 3 つの列の下端を揃えなければならないという問題が発生しました。テーブルレイアウトでは、大きなテーブルを小さなテーブルにネストする方法を使用していますが、これにより 3 つの列を簡単に揃えることができますが、div レイアウトでは 3 つの列が独立して分散しており、コンテンツの高さが異なるため、揃えるのが困難です。実際、div を完全にネストし、3 つの列を 1 つの DIV に配置して、下部の位置合わせを実現できます。以下は実装例です (白い背景のボックスはページをシミュレートします)。
体
このサンプル ページのメイン コードは次のとおりです。
<div id="ヘッダー"></div>
<div id="メインボックス">
<div id="メニュー"></div>
<div id="サイドバー"></div>
<div id="コンテンツ"></div>
</div>
<div id="フッター"></div>
特定のスタイル シートは、対応するセクションに記述されています。重要な点は、#mainbox レイヤーが #menu、#sidebar、#content の 3 つのレイヤーにネストされていることです。 #content のコンテンツが増えると、 #content の高さが増加し、 #mainbox の高さも拡張され、 #footer レイヤーは自動的に下に移動します。これにより、高度な適応性が実現されます。
#menu と #content がページの右側「FLOAT: right;」にフローティングし、#sidebar が #menu レイヤーの左側「FLOAT: left;」にフローティングしていることにも注目してください。この効果を達成するには、絶対位置決めを使用することもできます。
この方法のもう 1 つの問題は、サイドバー #sidebar の背景を 100% にできないことです。一般的な解決策は、ボディの背景色で塗りつぶすことです。 (Mozillaなどのブラウザでは#mainboxの背景色が無効のため、#mainboxの背景色は使用できません。)
さて、主要な枠組みは構築されました。残りの作業は、それにレンガとタイルを追加するだけです。他のレイアウトを試してみたい場合は、次の記事を読むことをお勧めします。
CSS レイアウトの 16 個の例
onestab: 3 列の複合レイアウトのデモ
onestab: 自由に伸縮可能な 3 列レイアウト
