1

なしで2つのdivを同じ高さにできますか

1）境界線を持てないため、マージンハック：

margin-bottom : -500px;
padding-bottom : 500px;

2) JavaScript を使用すると、キャッシュされていないユーザーのページがちらつきます。

3）コンテンツを動的に追加できないため、高さを固定しました。

これは、このページhttp://www.stdicon.com/の真ん中にある 2 つの div 用です (現在は JS でサイズ設定されていますが、純粋な CSS ソリューションをお勧めします) 。

4

3 に答える 3

1

おそらく、Faux Columns アプローチで問題を解決できます。

フェイクコラム

于 2009-09-26T07:09:33.933 に答える
1

流動性/ズームを気にしないと仮定して、ピンクとライト オレンジの最上部の高さ 1 ピクセルの水平方向のスクリーンショットを撮り、2 つの区画の背後にある垂直方向に繰り返される背景にします。

于 2009-09-26T05:43:39.830 に答える
0

次の手順を使用して、相対的に配置されたラッパーにネストされた絶対配置の div を使用して、同じ高さの列を作成します。

  • inline-block を使用して列を作成する
  • すべての列の周りにラッパー div を作成し、相対的に配置されるように設定します
  • 絶対位置の div をラッパー div 内の最後の要素として配置します
  • 絶対位置の div を { bottom:0; に設定します。高さ: 100%; z-index: -1; }
  • 絶対位置の div の幅を最初の列の幅に等しく設定します
  • 最初の列に重なるように、絶対位置の div の左オフセットを設定します
  • 絶対配置された div の希望の境界線と背景色を設定します
  • 必要に応じて、残りの列に対してこの手順を繰り返します

次に例を示します。

<!doctype html>
<html>
<head>
  <title>Equal Height Columns</title>
  <meta charset="utf-8">
  <style>
  /* Wrapper */
  .wrapper { position: relative; }
  /* Column */
  .column { display: inline-block; vertical-align: top; }
  /* Layered Illusion */
  .equalizer { position: absolute; bottom:0; left: 0; height: 100%; z-index: -1; }
  /* Border for Column and Illusion */
  .equalizer, .column { border: 1px solid red; border-width: 0 1px; width: 200px; }
  </style>
</head>
<body>
  <div class="wrapper">
    <div id="first" class="column">
      <span>hello</span>
    </div>
    <div class="column">
      <div>
        <p>hi</p>
        <p>there</p>
      </div>
    </div>
    <div class="column">
      <span>there</span>
    </div>

    <div class="equalizer"></div>
  </div>
</body>
</html>
于 2012-06-21T18:41:49.233 に答える