絶対配置要素を使用してdivとテキストの長さを拡張します

Question

あるコンテナdivを作成しようとしていて、その中に段落があり、長さが変わっています。

私の要素がpositioned: absoluteに設定されているため、すべてのテキストを許可するためにdivを正しい高さに拡張したいと考えていますが、問題が発生していると思います。

私にフィドルを参照してください：最初のボックスでhttp://jsfiddle.net/p7pue2kx/1/

を、テキストがきれいに収まります。しかし、テキストがはるかに長い場合、オーバーフローし、divコンテナはそれに応じて展開されません。最小の高さがあることを確認したいが、最大値はテキストサイズによって決まる。

私のテキストがコンテナを拡張するのを許すかもしれないこの位置付けを行うより良い方法がありますか？

ありがとうございます。それを使用する必要がないところ

Answer 1

は、絶対位置を使用しないでください:)

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.masterContainer { 
 
    height: 800px; 
 
    background: blue; 
 
    width: 300px; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 100%; 
 
    background: yellow; 
 
    min-height: 60px; 
 
    margin: 10px 0px; 
 
    padding: 10px; 
 
} 
 
.summary { 
 
    clear: both; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background: lightblue; 
 
} 
 
.id { 
 
    float: left; 
 
    background: green; 
 
} 
 
.xyz { 
 
    float: right; 
 
    background: red; 
 
}

<div class="masterContainer"> 
 
    <div class="container"> 
 
    <div class="id"> 
 
     KEY/ID 
 
    </div> 
 
    <div class="xyz">ABCD EFGH</div> 
 
    <div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div class="id"> 
 
     KEY/ID 
 
    </div> 
 
    <div class="xyz">ABCD EFGH</div> 
 
    <div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div class="id"> 
 
     KEY/ID 
 
    </div> 
 
    <div class="xyz">ABCD EFGH</div> 
 
    <div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
 
    </div> 
 

 
</div>

Answer 2

可能な場合は絶対位置を常にを避けます。あなたが望むものを達成するための最小限のCSSを備えたソリューションがここにあります。

CSS：

.masterContainer { 
    height: 800px; 
    background: blue; 
    width: 300px; 
} 
.container { 
    width: 300px; 
    background: yellow; 
    margin: 10px 0px; 
} 
.summary { 
    background: lightblue; 
    display: block; 
} 
.id { 
    background: green; 
} 
.xyz { 
    background: red; 
    float: right; 
} 

HTML：

<div class="container"> 
    <span class="id"> 
    KEY/ID 
    </span> 
    <span class="xyz">ABCD EFGH</span> 
    <span class="summary"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    </span> 
</div> 

<div class="container"> 
    <span class="id"> 
    KEY/ID 
    </span> 
    <span class="xyz">ABCD EFGH</span> 
    <span class="summary"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </span> 
</div> 

<div class="container"> 
    <span class="id"> 
    KEY/ID 
    </span> 
    <span class="xyz">ABCD EFGH</span> 
    <span class="summary"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </span> 
</div> 

</div> 

Fiddle