me gustaría decir que la altura de un área de texto es igual a, por ejemplo, el 50% de la altura de la vista. ¿Cómo puedo hacer eso? Un simple height: 50% no hace el truco.CSS: Altura del área de texto como un porcentaje de la altura de la ventana gráfica
Una altura simple: 50% no hace el truco.
No, porque su padre no tiene una altura explícita. Entonces, ¿50% de qué? El padre dice 'auto', lo que significa que se basa en la altura del contenido del niño. Que depende de la altura en el padre. Argh! etc.
Así que tiene que darle a su padre una altura porcentual. Y el padre de los padres, todo el camino hasta la raíz. Ejemplo de documento:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">
html, body { margin: 0; padding: 0; }
html, body, #mything, #mything textarea { height: 100%; }
</style>
</head><body>
<div id="mything">
<textarea rows="10" cols="40">x</textarea>
</div>
</body></html>
La otra posibilidad, si no desea tener que establecer la altura en todo, es utilizar el posicionamiento absoluto. Esto cambia el elemento en el que se basan las dimensiones desde el padre directo al ancestro más cercano con una configuración de 'posición' que no sea 'estática' predeterminada. Si no hay elementos ancestrales con posicionamiento, las dimensiones se basan en el "Bloque contenedor inicial", que es del mismo tamaño que la ventana gráfica.
Por último, está el problema trivial de ‘100%’ es ligeramente demasiado grande debido al relleno y el borde adicional que se aplica a las áreas de texto. Puede solucionar este problema:
creo que es necesario utilizar JavaScript de alguna manera de hacer esto. Maneje el evento de cambio de tamaño y configure el área de texto para que sea ese número de píxeles.
Puede hacerlo si establece display: block. Pero en html 4.01 strict debes definir cols y rows, pero creo que puedes anularlos con css.
Si bien no tengo todos los navegadores para probar esto en, parece como si la mayoría acepta simplemente especificando la altura debe trabajar.
He probado esto en Internet Explorer 7 y Firefox 3.0.
basta con utilizar el siguiente código:
<textarea style="height: 50%; width: 80%;">Your text here</textarea>
¿Qué navegador (s) estabas teniendo problemas con?
HTML y CSS no son tan buenos para hacer este tipo de cosas con las alturas. Definitivamente se trata más de desplazarse verticalmente a través de una página de flujo libre. Creo que JavaScript es probablemente la solución más completa, como dice FryGuy.
Esto probablemente no existía cuando se formuló esta pregunta, pero el Módulo de Valores y Unidades CSS Nivel 3 incluye viewport-percentage lengths. Parece not to be supported on mobile browsers except iOS, sin embargo.
Intente quitar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
aquí es un poco ejemplo de un textarea que tiene exactamente el 50% de la altura de visualización utilizando el CSS3 vhviewport unit que es
igual a 1% de la altura del bloque que contiene inicial.
Así que si fijamos la altura de la textarea-50vh, se obtendrá la mitad de la body altura:
html, body, textarea {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
}
textarea {
height: 50vh;
}<textarea></textarea>Es pretty good supported por los diferentes navegadores, excepto por Opera mini y soporte parcial en IE.
Ver también [esta pregunta] (http://stackoverflow.com/q/7570438/113848). – legoscia
Puede probar unidades de ventana (CSS3): http://www.w3.org/TR/css3-values/#viewport-relative-lengths –