0

これがWeb1.0の初心者向けの質問のひとつであることは知っていますが、残念ながら、私は自分で質問する立場にあります。私はこの種のレイアウトを必要としないサイトを行っており、現在、3列のレイアウト、固定幅の中央の列を備えた友人のために1つを行うことを検討しています...ヘッダーまたはフッターボックス要素のひねりがなく、 3つの列はすべて、表示される画面のサイズに合わせて高さ方向に伸びます。

この問題をさらに悪化させるのは、bodyが1つの色または背景画像を持ち、中央の列が独自の背景色または画像を持つことです。

視覚的には、ページレイアウトは次のようになります。

+----------+---------------+----------+
|nothing   |only content   |nothing   |
|here      |will be here   |here      |
|just the  |w/a different  |just the  |
|body b/g  |background     |body b/g  |
|color or  |color or       |color or  |
|image     |image          |image     |
|          |               |          |
|          |all 3 columns  |          |
|          |always fill    |          |
|          |screen height  |          |
+----------+---------------+----------+

私は絶対的なポジショニング（Adobeフォーラム）に反対するいくつかの興味深い議論を読みました。これは明らかに偽の列や他の絶対的/相対的なポジショニングと衝突します。理想的にはすべてフロートでやりたいのですが、これを達成するための最も効率的な方法がわかりません。これはちょうど私の膝に落ちたので、今日まで私は何も試していません。繰り返しになりますが、これは基本的なことですが、1つのB / Gカラーと中央の要素を使用してサイトを作成する場合、「なぜこれが難しいのか」と考えさせられます。

4

2 に答える 2

0

中央の列に幅を設定し、それを与えますmargin: auto。これにより、ブロックレベルの要素の両側に等しいマージンが適用されます。

CSS

#center {
    width: 33.33%;
    margin: auto;
}
于 2013-03-13T05:20:02.360 に答える
0

中央のセクションをサイドコラムよりも広くするつもりかどうかはわかりません。そうする場合は、33.3％より広くする必要があります。

高さについては、次のようにします。

    html, body {
      height: 100%;
    }

次に、セントラルディビジョンが

  position: relative;
  height: 100%;
  margin: 0 auto;

ここでフィドルを参照してくださいhttp://jsfiddle.net/mWqwD/

于 2013-03-13T05:45:14.190 に答える