インライン要素の高さの一致

左と右のdivを保持するコンテナがある場所で、問題が発生します（実際には3回目です）。インライン要素の高さの一致

長さが異なる場合（右が左または他の方法よりも長い場合）、JavaScriptを使用せずにもう一方を[高さ]に伸ばす方法を教えてください。

私はテーブルに結果を出す必要はありませんし、継承すると思っていましたが（しかし、それは単にそれを継承します）。簡単な答えはないようです。または、私はテーブルを使うべきですか？何かそれに間違っている？

この問題は、それがどうあるべきか愚かな簡単なために私の心を吹いている...事前に

ありがとう！

編集：私は例をあげる：あなたが知っているだろうと

<body style="background: #000000 url(????.com);"> 
    <div id="container" style="margin:0 auto; width:996px; height: auto; background: transparent; overflow:hidden;"> 
     <div id="left" style="float:left; width:690px"> 
      <div style="background-color:#FFFFFF;">Content</div> 
      <div style="background-color:#FFFFFF;">content</div> 
     </div> 
     <div id="right" style="float:left; width:306px"> 
      <div style="background: transparent;">Content<br />Content<br />content<br/>Last line</div> 
      <div style="background-color:#FFFFFF;">Content</div> 
     </div> 
    </div> 
</body>

、左は右よりもはるかに小さいです。高さ：100％は何もしないようです。

結果：JSサポートがなければ不可能です。乾杯。比較的単純なフェイク列が仕事をする何のために

出典

2009-08-26 Dorjan

あなたのタイトルに「高み」と言いたいですか？私はあなたのタイトルを修正したいですか？ –

ええと、ありがとう！ – Dorjan

あなたは高さや幅について質問しているのかまだ分かりません。 –

あなたはそのテーブルまたはJavaScriptなしに単にCSSで行うcan't恐れIE6とIE7 - 私のためのサポートが必要な場合。

他のブラウザの場合は、table-cellとdisplay：table-rowのように表示できます。

もちろん、背景画像を使って偽装することは、実際には列が同じ高さである必要はないが、そのように見える場合に機能します。

出典

2009-08-26 17:01:42 jeroen

私が思った通り。私の第二の質問のために：テーブルを使用するべきではない理由がありますか？または、それは十分な第二公式の質問/スレッド – Dorjan

私はジェロが正しいと思う...あなたが高さがコンテナに設定されている場合、私が以前に投稿した私の答えは動作します。 javascriptで行う場合は、divのscrollHeightまたはoverflowHeightというプロパティを探します。それはあなたにdivの高さを与え、他のdivの高さを設定するのに使うことができます。 – Zoidberg

テーブルを使用せず、SO（レンダリング時間、スクリーンリーダーなど）を見回すだけの理由はたくさんあります。しかし、テーブルを使用する正当な理由もありますが、私はあなたのページ全体を1つにまとめることをお勧めしません。 – jeroen

http://www.alistapart.com/articles/fauxcolumns/

、あなただけの垂直列の簡単な固体BG色を模倣した画像を繰り返します。もっと複雑なものなら、そのような組み合わせを行う必要があります。

以上の技術のためにここに私の返事を参照してください： 2 column CSS div with stretchable height

出典

2009-08-26 16:37:27

ありがとう、私は偽テクニックを見ていきます。 – Dorjan

ここでの問題は、透明では機能しないということです。 – Dorjan

デザインへのリンクはありますか？ –

あなたはちょうど列が同じ長さであることを表示させたい場合は、この醜いハックを使用することができます。

.rightDiv, .leftDiv 
{ 
    margin-bottom: -1000px; 
    padding-bottom: 1000px; /*1000 + real padding*/ 
} 
.wrapper 
{ 
    overflow: hidden; 
}

基本的に、それは彼らが必要以上の不要で、さらに1000pxを拡張するために、両方の列が発生します隠されたビット。しかし、ボトムボーダーでは動作しません。

明らかに、これは実際には同じ長さにはなりません。

出典

2009-08-26 17:04:56 Eric

面白いハック感謝ですが、私はむしろそうです:) – Dorjan

インライン要素の高さの一致

答えて

関連する問題