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
6 respuestas
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);
});
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;
}
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
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>
Como dijo Jleagle, debes usar min-height. Para la mayoría de los navegadores:
height: auto !important;
height: 100px;
min-height: 100px;
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;
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.