絶対配置された子divは親に合わせて展開されますか？

Question

相対配置された親を埋めるために絶対配置された子が展開されることはありますか？ （親の高さは固定されていません） ここは私がやったことで、FirefoxとIE7ではうまくいきますが、IE6ではうまくいきません。 :(

<div id="parent"> 
    <div id="child1"></div> 
</div> 

#parent { position: relative; width: 200px; height:100%; background:red } 
#child1 { position: absolute; top: 0; left: 200px; height: 100%; background:blue } 

Answer 1

私の記憶が正しければIE6はdiv要素の高さをどのように処理するかのバグがある。それが唯一の高さが100％に設定されている場合、その中にコンテンツを含むために必要な高さにdiv要素を作成します。私は希望、それが機能しない場合、それはとにかく

死んブラウザであるとIE6をサポートする心配親のdivの高さを取得するjQueryのようなものを使用して、設定しないでください

1. ：二つのアプローチをお勧めします子のdivをその高さに設定します。
2. バックグラウンド同じ色になることはないので、誰もその違いに気づくことはありません。

Answer 2

これは、子供の上部と下部の両方の属性を設定することで実現できます。その記事の下部にある

See how this is done

は、あなたがIE6の訪問者のために含めるべきであるディーン・エドワーズIE7（およびIE8）JSライブラリへのリンクがあります。これは実際にIE6をIE7（または8）のように動作させるJSライブラリです。甘い！

Dean Edwars' IE7 and 8 JS libraries

Answer 3

は、私の知る限りでは、は、絶対位置の子要素周りの親要素を拡大する方法はありません。子要素を絶対的に配置することによって、ページ項目の通常のフローからそれを削除します。

私は最近、2列のウェブサイトを構築しましたが、右側の列は絶対的に配置されていましたが、左側の列は配置されていませんでした。左の列の内容が小さく、高さが右の列よりも小さい場合、ページは完全に配置されているため右の列が切り取られます。

は、これを解決するために、私は、右の列の高さは、左の列の高さよりも大きかったかどうかを判断するために持っていたので、2つのそれ以上に、親のdivの高さの高さを設定している場合。

ここは私のjQueryソリューションです。私は多くのコーダーではありませんので、これを微調整してください。

jQuery(function(){ 

    var rightColHeight = jQuery('div.right_column').height(); 
    var leftColHeight = jQuery('div.left_column').height(); 

    if (rightColHeight > leftColHeight){ 
    jQuery('.content_wrap').height(rightColHeight+'px'); 
} 
}); 

Answer 4

これは簡単です。トリックは同時に

をtop: 0pxとbottom: 0pxを設定しているここで作業コード項目番号1のため

html, body { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

#parent { 
    display: block; 
    background-color: #ff0; 
    border: 1px solid #f00; 
    position: relative; 
    width: 200px; 
    height: 100%; 
} 
#child1 { 
    background-color: #f00; 
    display: block; 
    border: 1px solid #ff0; 
    position: absolute; 
    left: 200px; 
    top: 0px; 
    bottom: 0px; 
} 

ここで働くの例をご覧くださいhttp://jsfiddle.net/Qexhh/