html - posicionamiento - Textarea para llenar un contenedor principal exactamente, con relleno

mover una caja en css

Question

Quiero un <textarea> para llenar por completo un contenedor primario de tamaño absoluto, con relleno en el área de texto. Tengo esto funcionando para Chrome usando el siguiente código:

<div id="wrap"><textarea>hello stack overflow world</textarea></div>

/* Color and border CSS omitted for simplicity */
#wrap    { position:absolute; top:10%; left:20%; right:30%; bottom:60%      }
textarea { position:absolute; top:0; left:0; right:0; bottom:0; padding:1em }

Desafortunadamente, Firefox (v5) no respeta correctamente la posición derecha / inferior, y produce estos resultados:

Aquí hay un violín que muestra el problema en acción: http://jsfiddle.net/ZEhwR/

¿Cómo puedo lograr el resultado indicado en la primera oración en Chrome y FF (y, idealmente, IE9 también)?

Answer 1

Este es un caso en el que recomiendo cambiar el marcado (ni siquiera dañará la semántica):

HTML

<div id="wrap">
  <label class="textarea-label">
    <textarea></textarea>
  </label>
</div>

CSS

.textarea-label
{
  display: block;
  /* border, padding, and other styles go here,
  don''t set the height, and don''t use floats or positioning */
}

.textarea-label textarea
{
  border: 0 none;
  margin: 0;
  outline: 0 none;
  padding: 0;
  width: 100%;
}

Aún debería poder cambiar el tamaño del área de texto verticalmente sin problemas. Si usa inline-block en inline-block para la etiqueta, también debería poder cambiar el tamaño horizontalmente.

La ventaja de utilizar la etiqueta es que al hacer clic en la etiqueta se seguirá enfocando el área de texto como si hubiera hecho clic en el área de texto. Además, al usar el selector de descendientes, conservará sus estilos de área de texto predeterminados cuando solo necesite un área de texto sencilla.

Answer 2

Si el único problema que enfrenta es que el relleno se agregará al 100% de ancho y alto, puede considerar la propiedad CSS3 de tamaño de caja. Aquí hay un ejemplo

.box {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100px;
  padding: 10px;
}

En este caso, la caja tendrá un ancho total de 100 píxeles en lugar de 120 píxeles.

Más sobre los valores de esta propiedad verifique este link

Answer 3

Tengo una solución donde puedes tener 100% de ancho y alto con relleno en el área de texto. Uso márgenes negativos para lograr el efecto deseado.

HTML:

<div class="container">
    <textarea class="text"/></textarea>
</div>

CSS:

.container{
  padding: 10px
  border: 1px solid silver
}

.container .text{
  resize: none;
  outline: none;
  width: 100%;
  padding: 10px;
  border: none;
  height: 100%;
  margin: -10px;
}

Probado esto trabajando en Google Chrome y Firefox

Answer 4

width: 100%; height: 100% uso width: 100%; height: 100% width: 100%; height: 100% para hacer que el área de texto para llenar el div de envoltura. Desafortunadamente, no podrá colocar márgenes / relleno, ya que se AGREGARán al 100%, por lo que los bordes derecho / inferior se desbordarán.

Editar : para usar el width:100% junto con el relleno, puede cambiar el modelo de tamaño de la caja :

width:100%;
height:100%; 
box-sizing: border-box;         /* For IE and modern versions of Chrome */
-moz-box-sizing: border-box;    /* For Firefox                          */
-webkit-box-sizing: border-box; /* For Safari                           */

Con este cambio, el 100% ahora se refiere a la distancia entre las partes externas de los bordes, en lugar de la distancia entre el exterior del contenido.