絶対位置でdivにダイナミックテキストを挿入するにはどうすればよいですか？

Question

http://www.barelyfitz.com/をご覧くださいscreencast / html-training / css / positioning / 項目6.それは言います：

  

通常、要素に含まれるテキストの量や使用される正確なフォントサイズがわからないため、ほとんどのデザインでは実行可能なソリューションではありません。

絶対位置でdivにダイナミックテキストを挿入するには、どのような回避策を使用する必要がありますか？

任意のアプローチを歓迎します

よろしく、

Answer 1

テキストの量に基づいて高さまたは幅を変更せずに、divをその場所に保持することが主な目標である場合は、次のようにします。

div {
    overflow: scroll;
}

もう1つのオプションは、divに収まるようにテキストサイズを縮小することですが、これにはある程度のあいまいな計算が必要であり、テキストが非常に小さくなり意味がないというリスクがあります。

divの高さをテキストに基づいて変更する場合、これにはあいまいな計算も含まれますが、基本的には次のようにしてテキストの長さを取得します：

var sometext = "Hey, I'm some text!";
var textlength = sometext.length();

そして、その長さに関連して高さを変更します。あなたは数字で遊んでみたいと思うでしょうが、それは次のようになります：

var div_height = 10 * textlength;
$("div").css("height,"+ div_height +"em");

Answer 2

W3Cサイトの視覚効果セクションを参照こちら

Answer 3

<！> quot; overflow：auto <！> quot; dynamic-text-container divの場合、高さは問題になりません。

Answer 4

問題は、絶対位置にあるdivにダイナミックテキストを配置しないことです。divは、そこにあるテキストに合わせて拡張されます。この例の赤と緑のdivには高さが定義されていません。

絶対に配置されたdivはドキュメントのフローから取り出されるので、htmlでそれらの後に表示されるものはすべて、そこにさえないように動作します。

絶対配置のdivを使用するデザインでは、絶対配置のdivが他のコンテンツと重ならないように、含むdivで定義された高さが必要です。例では、<div id="div-1">の高さは250pxに定義されています。それを100pxに変更すると、赤と緑のdivの下に<div id="div-after">が移動します。

したがって、サイドバーに絶対位置のdivがあり、その後に何もない場合は、必要なダイナミックテキストをすべて追加できます。ヘッダーにある場合は、実装が非常に複雑になります。