Tengo un párrafo de texto dentro de un <div> que varía con la longitud y, por lo tanto, con la altura. Quiero que el div tenga una altura mínima de 100px, pero crece a medida que la altura de <p> aumenta por encima de 80px. Configuré la propiedad css height: 100px para <div> pero cuando <p> creció más allá de 80px el texto simplemente se derrama desde <div> y la altura de { {X9}} permanece sin cambios. ¿Qué tengo que hacer?

Código:

<div id="outer_box">
    <div id="box">
        <p class="content"> Some long paragraph of content here </p>
    </div>
</div>

CSS:

#outer_box {
    width: 300px;
    min-height: 100px;
}

#box{
    width: 300px;
    min-height: 90px;
}

El div con id="box" cambió su altura para contener el <p> por completo, ¡pero el div con id="outer_box" no cambió su altura!

Interesado en una solución CSS en lugar de una jQuery si es posible, usaré lo que funcione. La razón para elegir una solución CSS pura es porque div no existe hasta que el usuario pasa el mouse por encima. Me pregunto cómo apuntar a un div con CSS que aún no existen

4
Nyxynyxx 2 jul. 2011 a las 14:29

6 respuestas

La mejor respuesta

Mantenga la altura mínima establecida en el div en su CSS, luego usaría la función de altura de jquery para calcular la altura del párrafo. Prueba esto en tu javascript:

$(document).ready(function(){
    var h = $('div p').height();
    $('div').css("height", h);
});
0
Marc Sanders 2 jul. 2011 a las 10:40

Configura el min-height del div, y luego maneja la versión anterior de IE a través de un hack CSS estándar:

/* Because of the `* html` part, it only applies in IE, other browsers ignore it */
* html #theDiv {
  height: 100px;
}

/* Most browsers use this instead */
#theDiv {
  min-height: 100px;
}

Ejemplo en vivo

0
T.J. Crowder 2 jul. 2011 a las 10:44

La altura de div cuando se establece en auto permite que el contenido dentro de él decida su longitud. Sin embargo, altura mínima anula y le permite tener una altura mínima para el div

0
web_ninja 2 jul. 2011 a las 10:41

Parece que le falta la propiedad de ajuste de texto. He probado los siguientes estilos en ie9 y cromo. Parece estar funcionando bien.

    <!DOCTYPE html>

    <html>
        <head>
           <style>
            #outer_box {
                width: 300px;
                min-height: 100px;
                background-color:blue;
            }

            #box{
                width: 300px;
                background-color:green;
                word-wrap:break-word;
            }
            </style>

        </head>

        <body>
            <div id="outer_box">
                <div id="box">
                    <p class="content"> Some long paragraph of content here kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
                </div>
            </div>
        </body>
    </html>
0
Amrit 2 jul. 2011 a las 14:36

Como dijo Jleagle, debes usar min-height. Para la mayoría de los navegadores:

height: auto !important;
height: 100px;
min-height: 100px;
3
Thomas Kekeisen 2 jul. 2011 a las 10:36

Agregue esto a los estilos de su div y todo debería funcionar bien, también para navegadores antiguos:

min-height:100px;
height:auto !important;
height:100px;
0
Henri Podolski 2 jul. 2011 a las 10:37