2012-05-09 2 views
0

センターの幅を1060ピクセルに設定しました。この中には、背景色/画像と幅がそれぞれ260pxと800pxの2つのdivがあります。 これで、2つの子divの高さを、それらの内容にかかわらず同じにする必要があります。 「child1」に巨大なコンテンツがあり、それを見るためにブラウザを下に移動し、「child2」のコンテンツが少ない場合は、「child2」も「child1」に一致するように拡張されている必要があります。一方、 "child1"と "child2"の両方にコンテンツが少なく、ブラウザスクロールが生成されない場合は、両方ともブラウザウィンドウの高さを占める必要があります。コードスニペットを以下に示します。2つのdivの高さをコンテンツの内容に関係なく同じにするにはどうすればよいですか?

<html> 
    <head> 
    <style type="text/css"> 
     * { margin:0; padding:0; } 
     .parent { clear:both; margin:auto; width:1060px; } 
     .child1 { background-color:#999999; float:left; width:260px; } 
     .child2 { background-color:#99CC00; float:left; width:800px; } 
     .child1a, child2a { float:left; width:100%; } 
     .child2a { border-bottom:1px solid #000000; height:500px; } 
    </style> 
    </head> 

    <body> 
    <div class="parent"> 
     <div class="child1"> 
      <div class="child1a">1</div> 
      <div class="child1a">2</div> 
      <div class="child1a">3</div> 
     </div> 
     <div class="child2"> 
      <div class="child2a">1</div> 
      <div class="child2a">2</div> 
      <div class="child2a">3</div> 
     </div> 
    </div> 
    </body> 
</html> 

CSSのみを使用して解決できますかJavaScriptを使用する必要がありますか?

+0

解決方法を確認しましたか? - > http://stackoverflow.com/questions/873781/how-to-make-floating-inner-divs-the-same-height-as-the-highest-div – rt2800

+0

あなたの返事をありがとう。私はこのサイトを見ていましたが、私のサイトは非常に重いイメージで、私はCSSソリューションが必要です。ヘルプを配置します。 – user1144830

答えて

0

「display:table-cell」を使用して行うことができます。

http://jsfiddle.net/sWHKs/

+0

IE8で動作しません – user1144830

+0

これは、標準モードを最初の行として起動するdoctypeがないためです。 '<!DOCTYPE html>'を先頭に付けます。 – thirtydot

+0

ありがとうございます。両方のdivのコンテンツが少なければ、ブラウザのウィンドウを占有すべきです。 Plaseはdisplay:table-cellプロパティを使ってそれを行う方法を教えてくれます。 – user1144830

関連する問題