¿Cómo puedo hacer que un área de texto ocupe la altura restante en un div?

Tengo un conjunto de código como se indica a continuación. El punto es tener un conjunto de imágenes en el div, y el resto del div se rellena con un área de texto. Si configuro la altura = 100%, tendrá la misma altura, que no es (div.height - images.height) y hace que el área de texto sea más larga.

Dice en w3c que inherit no funciona en este momento, auto simplemente creará un área de texto predeterminada, y la codificación nunca lo logrará, ya que el div podría ser más grande o más pequeño.

¿Qué han hecho todos ustedes para lograr esto?

<div id = "parent">
  <div id = "images" style="background-color:#99ccff;">
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
  </div>
  <textarea style="width:100%; height:100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;" >
  </textarea>
</div>

preguntado el 12 de junio de 12 a las 16:06

¿Cómo es la altura de #parent definido? puedes hacer un jsfiddle.net demostración que muestra el problema? (puedes usar dummyimage.com para las imágenes) -

4 Respuestas

Parece imposible que este comportamiento funcione en otros navegadores que no sean Chrome.

Intenté dividir las imágenes y el área de texto en dos filas de tablas CSS para dar #images una altura tal que #textarea-container ajustar automáticamente su altura. El siguiente paso fue darle a textarea 100% de alto y 100% de ancho.

No se admite el posicionamiento absoluto de un elemento en una celda de tabla con posición relativa:
Posicionamiento CSS dentro de una tabla HTML

So textarea { position: absolute; left:0;right:0;bottom:0;top:0 } en una celda de tabla posicionada relativa no funcionará.

HTML

<div id ="parent">
    <div id="images">
        <img src="http://www.dummyimage.com/100x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/80x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/20x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/80x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/100x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/120x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/50x20/cc5acc/fff.png" />
    </div>

    <div id="textarea-container">
        <textarea></textarea>    
    </div>    
</div>​

CO

* { margin:0; padding: 0 }

#parent{
    width: 400px;
    height: 300px;
    display: table;
    background: blue;
}
#images {
    display: table-row;
    height: 0;
}

#textarea-container {
    display: table-row;
}

textarea {
    height: 100%;
    width: 100%;
}

! Esta solución depende de display: table, display: table-row y Google Chrome.

Demostración en vivo (funciona solo en Google Chrome): http://jsfiddle.net/atTK7/4/
Soporte para mesa de exhibición: http://www.quirksmode.org/css/display.html

Se recomienda una solución alternativa de Javascript para navegadores, excepto Chrome.

contestado el 23 de mayo de 17 a las 13:05

No soy muy bueno usándolo, pero quizás desee probar display:box;. Yo tengo un ejemplo aquí eso hace lo que (creo) quiere, pero con el 'error principal' que ya no puede cambiar el tamaño del área de texto (pero si eso no es un problema, puede cambiar el tamaño: ninguno;).

Respondido el 12 de junio de 12 a las 19:06

Además, más sobre cajas flexibles - Pocos

Tal vez sea un problema con su navegador. Acabo de probar tu código y parece hacer lo que querías: http://jsfiddle.net/Rorok_89/DMdyY/1/

Respondido el 13 de junio de 12 a las 12:06

Creo que el OP quiere el área de texto en la misma línea que las imágenes. - j08691

no en la misma línea. Quiero que llene el contenido restante... así que todas las imágenes se envolverían y ocuparían una altura total, entonces como mi comentario anterior: tendría algún tipo de comando de relleno que tomaría la altura restante y la aplicaría a el área de texto - Caído

Incluso si no sé claramente lo que quiere hacer, puede usar jQuery para ayudarlo a obtener el tamaño de los elementos reales y obligar a su área de texto a expandirse o reducirse. Esto debería ayudarte:

<script type="text/javascript">
var max_div_height = 1000; //The max height of your div in pixels
var total_div_height = 0 // The total height of your divs combined
jQuery(".container").each(function(){
    var context = $(this);
    var height = context.height();
    total_div_height+=height; //If it's width, set height otherwise
});
var textarea_size = max_div_height - total_div_height;
jQuery("#myTextarea").css("height", textarea_size+"px") // Give an ID to your textarea
</script>

Respondido el 12 de junio de 12 a las 17:06

El OP no se ha etiquetado con una pregunta con jQuery ni JavaScript. - j08691

No quiero usar JS para esto. Tenía la esperanza de que fuera algo que tuviera que ver completamente con CSS... como una especie de comando de relleno... para llenar la altura restante del contenedor con el área de texto. - Caído

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.