ALTO y ANCHO en proporcion exacta.

Computer XTress · #1 (**permalink**) 02/07/2007, 02:45

Hola a todos,

Intento hacer una pagina en la que una DIV contenedora ocupe el 100% del espacio visible en pantalla, sin que aparescan los scrollers. Este es el codigo que tengo:

Código HTML:

...
<body>
    <div id="content" style="width:100%;"></div>
</body>
...

El problema es que en un principio utilizar height: 100% no tenia efecto. Tal parece que los browsers esperan que le de un valor numerico entero al alto. Lo que hice fue tomar con js el screen.height y aplicarselo a mi DIV, pero me encontre que al numero resultante es mayor al espacio visible ya que los browsers tienen todo su encabezado con los botones, url, etc, ocupando un porcentaje de la pantalla.

Me pregunto... ¿hay alguna forma de forzar el WIDTH de la div al 100% del espacio visible REAL del documento?

Desde ya muchas gracias

hq1 · #2 (**permalink**) 02/07/2007, 10:07

Si pones width="100%", estás diciendo que se ocupe el 100% de la pantalla, si pones width="800px", estás diciendo que se ocupen 800 pixels y así con todo.
Con height puedes hacer igual, pero tienes que tener en cuenta que el contenido tiene que caber en las dimensiones de "width x height" o no se verá.
Obviamente, los usuarios con una pantalla de resolución 800x600 verán el contenido diferente que los que tienen 1024x780, etc. Por eso se recomienda usar medidas proporcionales, para que en la medida de lo posible, todos veamos el contenido lo más parecido posible.

Computer XTress · #3 (**permalink**) 08/07/2007, 23:19

HQ1, gracias por responder.

Me confundi al redactar... mi pregunta era:

"¿hay alguna forma de forzar el HEIGHT de la div al 100% del espacio visible REAL del documento?"

Perdon, puse WIDTH en vez de HEIGHT.

Entiendo que el HEIGHT se corresponde con la cantidad de información que exista, ya que la dimension HEIGHT varia en función del ALTO de la información... pero qué pasa si por ejemplo quero tener una div VACIA que tenga width y height al 100% del espacio visible... algo asi:

Código:

...
<body>
   <div id="div_completa">

   </div>
</body>
...

¿Como hago que "div_completa" ocupe el 100% de alto y ancho de la pantalla si está vacia?

GRACIAS! :)

Computer XTress · #4 (**permalink**) 09/07/2007, 04:32

Bueno encontre algo... cuando uso "HTML" me toma PERFECTO los valores WIDTH y HEIGHT al 100%, es decir, esto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
...
<div style="width: 100%; height: 100%; background-color: red;">
</div>
...

... me hace un marco ROJO que ocupa TODA la pantalla.

Cuando uso XHTML (lo que uso y no puedo cambiar por HTML), esto falla... es decir, cuando uso XHTML me toma bien el width al 100% pero no el height !!!

¿Hay algun workaround para esto?

Muchas gracias!

Saludos.

Computer XTress · #5 (**permalink**) 09/07/2007, 04:44

SOLUCIONADO:

http://apptools.com/examples/tableheight.php