親の高さを子要素の相対位置と絶対位置に一致させる

Question

これが基本的なように、私はこの動作を得ることができません。

簡単に言えば、私は親要素の相対位置を持っています。 次に、子要素 - 絶対位置。

子が親よりも高い場合、親の高さをどのように一致させることができますか。意味、親を拡張する方法。ここで

あなたは、あなたのファイルに次のコードを追加して、子クラスからの高さを削除してくださいjqueryの使用できる場合、私は https://jsfiddle.net/wthwawcv/

<div class="parent"> 
    dsfsdfsdfsdf<br> 
    hellow .. line 2 <br> 
    hello .. line 3 
    <div class="child"> 
    this is the child element to be diaplayed 
    </div> 
</div> 


.parent { 
    width:100%; 
    background: #ff0000; 
    width:200px; 
    position: relative; 
    overflow: hidden; 
} 

.child { 
    width:40px; 
    height:100px; 
    background: #ffff00; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

Answer 1

FIDDLE DEMO作業とされてclearfixハック：

.parent { 
 
    width:100%; 
 
    background: #ff0000; 
 
    width:200px; 
 
    position: relative; 
 
} 
 
.parent:after { 
 
    content: '.'; 
 
    color: transparent; 
 
    clear: right; 
 
    overflow: hidden; 
 
    display: block; 
 
    height: 0; 
 
} 
 

 
.child { 
 
    float: right; 
 
    width:40px; 
 
    background: #ffff00; 
 
}

<div class="parent"> 
 
<div class="child"> 
 
    this is the child element to be displayed 
 
    </div> 
 
    Child is<br> 
 
    longer than<br> 
 
    parent content. 
 
</div> 
 
<br> 
 
<div class="parent"> 
 
<div class="child"> 
 
    child 
 
    </div> 
 
    Child is<br> 
 
    shorter than<br> 
 
    parent content. 
 
</div>

Answer 2

で探しています何でJSのフィドルです。ここ は、あなたがfloatを使用することができ、代わりに、絶対位置の

var min_parent_height = jQuery(".child").height()+"px"; 
console.log(min_parent_height); 
jQuery(".parent").css({'min-height':min_parent_height});