¿Cómo definir el alto de un textbox en porcentage?

Pimager · #1 (**permalink**) 02/01/2013, 09:44

Hola a todos, alguien sabe como hacer para definir la altura de un textarea en porcentage? Al igual que ponemos el ancho, debería de poderse definir el alto también no? No consigo que me salga y me veo limitado a poner "rows=XX".
Tengo el siguiente código, pero el "height=70%" no me lo coge.

Código HTML:

<textarea id="myTextArea" style="width:100%;height:70%;resize:none;"></textarea>

Alguna idea?
Muchas gracias

pzin · #2 (**permalink**) 02/01/2013, 10:02

Si, en principio es igual que definir el ancho. Con la salvedad de que el padre del elemento textarea tenga una altura definida también.

Por defecto, todos los elementos tienen una altura automática (height:auto). Si aplicas un alto porcentual a un elemento del que su elemento padre no tiene altura definida sino automática, no va a funcionar porque al igual que en el ancho, la altura en medida relativa, tiene que ser con respecto a algo que tenga anchura o altura respectivamente.

Luego el problema no está en el textarea, sino en su elemento contenedor.

Por cierto, porcentaje va con jota.

Pimager · #3 (**permalink**) 02/01/2013, 10:20

Muchas gracias Bonez, pero tu respuesta me provoca otra pregunta: ¿Cómo puedo saber la altura de mi "stage"?, a partir de ella podría obtener la altura que necesito que tenga el textarea.

Muchas gracias

emprear · #4 (**permalink**) 02/01/2013, 11:20

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
 
<style type="text/css">
/*<![CDATA[*/
 
html,body{
height: 100%;
margin: 0; padding: 0;
border: none;
background: orange;
}
.myTextArea{
width: 100%;
height: 70%;
margin: 0;
padding: 0;
overflow: auto;
border: none;
background: lime;
}
 
#contenedor{
height: 200px;
margin: 0;
padding: 0;
border: none;
background: beige;
}
 
#contenedor .myTextArea{
height: 70%;
background: silver;
}
 
/*]]>*/
</style>
</head>
<body>
<textarea id="myTextArea" class="myTextArea" rows="5" cols="5">
Textarea % relativo al html/Body
Textarea
</textarea>
 
<div id="contenedor">
<textarea id="myTextArea2" class="myTextArea" rows="5" cols="5">
Textarea 2 % relativo al div contenedor
Textarea 2
</textarea>
</div>
</body>
</html>]

A que llamás "stage" ?

SAludos

Pimager · #5 (**permalink**) 02/01/2013, 11:38

Hola, "stage2 para mi es el tamaño de la web, es una palabra que se usa en ActionScript, y se me ha colado.

Muchas gracias por la ayuda.

emprear · #6 (**permalink**) 02/01/2013, 12:02

Si te referís al alto que generan todos los elemento de la página

Código Javascript:

Ver original<script type="text/javascript">
//<![CDATA[
function altoDelDocumento(){
var altoTotal = (document.height !== undefined) ? document.height : document.body.offsetHeight;
alert(altoTotal);
}
window.onload = altoDelDocumento;
//]]>
</script>

El valor arrojado, obviamente, no incluye el espacio que ocupan las barras de herramientas del navegador,

Saludos