0

高さが大きいため、コンテナの背景と重なっている絶対位置のdivがあります。この div は、その左側に喜んで座っている body div とコンテナーを共有しています。

本文のコンテンツではなく、絶対に配置された div の高さになるようにコンテナを拡張する方法はありますか?

それとも、div を並べてフロートし<div style="clear: both"></div>、2 つの下部に a をチャックする必要がありますか? コンテナを拡張するための厄介なハックのようです:/

編集: コメントはコード構造を好まないようです。というわけでここも編集します。

レイアウトは次のとおりです。

<div id="content">
   <div class="container">
      <div id="header"></div>
      <div id="main">
         <div id="column-1"></div>
         <div id="column-2"></div>
      </div>
   </div>
</div>

#content背景が繰り返され、#container はページの固定幅を設定します。#headerリンクに#main対応し、ページのメイン コンテンツを含む 2 つの列を保持します。#content's背景を下に繰り返しながら、これらの2つの列を隣り合わせに配置することはできません(フロート/絶対)

4

1 に答える 1

2

このレイアウトでは:

<div id="content">
  <div class="container">
    <div id="header"></div>
    <div id="main">
      <div id="column-1"></div>
      <div id="column-2"></div>
    </div>
  </div>
</div>

基本的な CSS は次のようになります。

html, body, div { margin: 0; padding: 0; border: 0 none; }
body, #content { height: 100%; }
#main { overflow: hidden; }
#column-1 { float: left; width: 300px; }
#column-2 { float: left; width: 600px; }

コンテンツの下に背景画像を表示したいとおっしゃいました。このことから、ページをフルスクリーンの高さ (最小) にしたいという意味だと思います。

絶対配置のポイントは、通常のフローから要素を削除することです。そのため、技術的にはコンテナーがないため、「コンテナー」を拡張して要素を含めることはできません。

絶対配置にはそれなりの場所がありますが、10 回中 9 回は float ベースのレイアウトの方が良い結果が得られます。しかし、これ以上の情報がなければ何とも言えません。

于 2009-10-30T03:30:02.193 に答える