Comment puis-je insérer du texte dynamique dans un div avec une position absolue?

Question

Jetez un coup d'œil à http://www.barelyfitz.com/ screencast / html-training / css / positionnement / élément 6. Il est dit:

  

Ce n'est pas une solution viable pour la plupart des conceptions, car nous ne savons généralement pas combien de texte il y aura dans les éléments ni les tailles de police exactes qui seront utilisées.

Quelle solution de contournement dois-je utiliser pour insérer du texte dynamique dans un div avec une position absolue?

Toute approche est la bienvenue

salutations

Answer 1

Si votre objectif principal est de garder la div à sa place, sans changer sa hauteur ou sa largeur en fonction de la quantité de texte, je choisirais:

div {
    overflow: scroll;
}

L’autre option consiste à réduire la taille du texte pour s’adapter à la division, mais cela implique une certaine quantité de calculs flous et vous courez le risque que le texte soit si petit qu’il est inutile.

Si vous souhaitez que la div modifie sa hauteur en fonction du texte, cela implique également des calculs flous, mais vous obtiendrez la longueur du texte avec:

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

Et modifiez la hauteur par rapport à cette longueur. Vous voudriez jouer avec les chiffres, mais cela ressemblerait à quelque chose comme:

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

Answer 2

Voir la section sur les effets visuels du site du W3C ici

Answer 3

Peut-être en utilisant " overflow: auto " pour le div de conteneur de texte dynamique. Ainsi, la hauteur ne pose pas de problème.

Answer 4

Le problème n’est pas de placer le texte dynamique dans le div positionné à la position absolue. Le div s’agrandira pour s’adapter au texte qui y est contenu. Dans votre exemple, aucune hauteur n'est définie sur les divs rouge et vert.

Les divs parfaitement positionnés sont retirés du flux du document afin que tout ce qui apparaît après eux dans le code html agisse comme s'ils n'étaient pas là.

Les conceptions qui utilisent des divs en position absolue doivent avoir une hauteur définie sur le div qui les contient afin que les divs en position absolue ne chevauchent pas d'autres contenus. Dans votre exemple, <div id="div-1"> a une hauteur de 250px définie. Changez cela en 100px et vous verrez <div id="div-after"> passer sous les divs rouge et vert.

Ainsi, si vous avez un div positionné de manière absolue dans une barre latérale sans rien après, vous pouvez ajouter tout le texte dynamique souhaité. Si vous en avez un dans votre en-tête, cela rendra votre conception très compliquée à mettre en œuvre.