一般的な 3 行 2 列の中央高さ適応 div+css レイアウト_html/css_WEB-ITnose

如何使整个页面内容居中，如何使高度自适应内容自动伸缩，这是学习CSS布局最常见的问题。

 

下面给出一个实际的列子，附详细说明。

 

首先可以将下列代码复制到html文件中运行一下，在mozilla、opera和ie浏览其中，均可达到居中且自适应高度的要求。

 

header

      

             

                    

right

1

2

3

                    

             

             

                    

left

                    

             

      

       footer

まず、本文と上部領域 #header を定義します。ここで重要なのは、本文の text-align: center と、margin- です。 header. left: auto および margin-right: auto; 効果はブラウザーのヘッダー領域を中央に配置するのと似ています。注: IE では、本文を中央に配置するには text-align:center を定義するだけで済みますが、mozilla (firefox) では margin:auto が必要です。

次に左右のエリアです。これら 2 つの列を中央に配置するために、コンテナーがそれらの外側にネストされ、原理は上記と同じです。こうすることで左右も全体的に中央に集まります。

なぜコンテナと左右の間に mainbg のレイヤーがあるのか​​疑問に思われるかもしれませんが、このレイヤーの役割は何でしょうか。このレイヤーは背景を定義するために使用されます。そのため、背景をコンテナー内で直接定義するのではなく、複数のレイヤーで定義してはどうでしょうか?その理由は、mozilla (firefox) が問題を引き起こしているためです (作成した Web ページが Firefox と ie で異なって表示されることを望まないため) mozilla では、高さの値を 1 つ以上ネストする必要はありません。背景を表示することはできますが、高さを指定すると、適応的な高さの要件を達成できないため、この方法で定義された mainbg レイヤーの左の float: にトリックが追加されます。の場合、高さを指定せずに背景を表示することができます。

最後に定義するのは、下部のフッター レイヤーです。この層の重要な点は明らかです。この文の機能は、フッター層の浮動継承をキャンセルすることです。そうしないと、フッターがヘッダーの近くに表示されるか、Mozilla が何かおかしなことをしていることがわかります:)

ここで終わりだと言われていますが、注意深い友人なら、左右が 1 つのレイヤーにネストされていることがわかるでしょう各レイヤーは .text{margin:0px;padding:20px} を使用していますが、これはなぜですか?その理由は、Mozilla と IE ではボックス モデルの解釈が異なるためです。マージンとパディングを直接定義すると、Mozilla と IE の表示に不一致が発生します。したがって、IE と Mozilla の間で不一致が発生した場合は、追加のレイヤーを追加することで問題が解決されることがよくあります。