¿Cómo puedo insertar texto dinámico en un div con posición absoluta?

Question

Eche un vistazo a http://www.barelyfitz.com/ screencast / html-training / css / posicionamiento / elemento 6. Dice:

  

No es una solución viable para la mayoría de los diseños, porque generalmente no sabemos cuánto texto habrá en los elementos, o los tamaños exactos de fuente que se utilizarán.

¿Qué solución necesito usar para insertar texto dinámico en un div con posición absoluta?

Cualquier enfoque es bienvenido

saludos,

Answer 1

Si su objetivo principal es mantener el div en su lugar, sin cambiar su altura o ancho en función de la cantidad de texto, iría con:

div {
    overflow: scroll;
}

La otra opción es reducir el tamaño del texto para que se ajuste al div, pero eso implica una cierta cantidad de matemática difusa y corre el riesgo de que el texto sea tan pequeño que no tiene sentido.

Si desea que el div cambie su altura en función del texto, esto también implica algunas matemáticas difusas, pero básicamente, obtendrá la longitud del texto con:

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

Y hacer que la altura cambie en relación con esa longitud. Te gustaría jugar con los números, pero se vería algo así como:

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

Answer 2

Consulte la sección Efecto visual del sitio W3C aquí

Answer 3

Tal vez usando " overflow: auto " para el div de contenedor de texto dinámico, por lo que la altura no es un problema.

Answer 4

El problema no es poner el texto dinámico en el div en posición absoluta: el div se expandirá para adaptarse al texto que esté allí. No hay alturas definidas en los divs rojo y verde en su ejemplo.

Los divs posicionados absolutamente se eliminan del flujo del documento, por lo que cualquier cosa que aparezca después de ellos en el html actuará como si ni siquiera estuviera allí.

Los diseños que usan divs posicionados absolutamente deben tener una altura definida en el div que los contiene para que los divs posicionados absolutamente no se superpongan con otro contenido. En su ejemplo, <div id="div-1"> tiene una altura de 250 px definida. Cambie eso a 100 px y verá <div id="div-after"> moverse debajo de los divs rojo y verde.

Entonces, si tiene un div absolutamente posicionado en una barra lateral sin nada después, puede agregar todo el texto dinámico que desee. Si tiene uno en su encabezado, hará que su diseño sea muy complicado de implementar.