IE6 y DIV al 100% de la pagina no va, como no...

tishu · #1 (**permalink**) 22/10/2008, 03:51

Hola, tengo una web donde con un click redimensiono un div al 100% de la pantalla.
En IE7, safari y firefox funciona bien, pero el IE6 nada.
La web es esta:
http://rbiosferamediterraneo.com/secciones/ver/uso_publico_actividades_en_la_rbim

Utilizo javascript para cambiar las propiedades CSS.
Y el codigo de redimensionar al 100% es este:

Código HTML:

document.getElementById(id).style.position = "absolute";
document.getElementById(id).style.top = "0";
document.getElementById(id).style.left = "0";
					
document.getElementById(id).style.height = "100%";
document.getElementById(id).style.width = "100%";

Seguramente este problema esté ya resuelto, pero no he encontrado con el buscador.
Gracias.

tishu · #2 (**permalink**) 22/10/2008, 05:26

He echo pruebas con una pagina html en blanco y debería de funcionar si pongo en el body width:100%
En la hojas de estilos lo he puesto y sigue sin funcionar.

Es posible que sea mas problema de javascript que de css.

Si algun moderador lee este mensaje, me gustaria que lo transladase a la seccion javascript.

walvaRo · #3 (**permalink**) 22/10/2008, 09:16

Estoy probando la solucion a priori tan "sencilla" con este código:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PRUEBA CSS HEIGHT</title>
</head>
<style type="text/css">

body {
background-image:url(fondo_cuadros.png);
background-repeat:repeat;
background-position: top left;
margin:0;
padding:0;
height:100%;
}

#cuadro {
background-color:#dfdb00;
position:absolute;
margin: 50px 0px 0px 150px;
padding: 20px 5px 20px 40px;
width:450px;
height:100%;
}

</style>
<body>

<div id="cuadro">
<h1>&iexcl;CON EL 100% DE HEIGHT EN BODY FUNCIONA!</h1>
<hr />
Las moscas inundan con su batir de alas el pequeño mundo de los gnomos minusculos. ¿Qué podemos hacer para evitarlo?
</div>

</body>
</html>

He de deciros que si.., si que he logrado que los DIVS ocupen el 100% de la página, pero ... este sistema supone un 100% irreal, puesto que genera un 10% de scroll aprox. con respecto al 100% del body... vamos que el resultado es como si el DIV ocupase un 110% aprox. del espacio vertical de la ventana...

No se si a vosotros os ocurre lo mismo...

Almenos ahora podemos hacer que llegue hasta abajo.

Mikmoro · #4 (**permalink**) 22/10/2008, 09:26

Cita:

Iniciado por walvaRo

He de deciros que si.., si que he logrado que los DIVS ocupen el 100% de la página, pero ... este sistema supone un 100% irreal, puesto que genera un 10% de scroll aprox. con respecto al 100% del body... vamos que el resultado es como si el DIV ocupase un 110% aprox. del espacio vertical de la ventana...

Pero es bastante lógico, si le pones un height del 100% y al mismo tiempo le das un margen superior de 50px, o que haces es que ese 100% lo desplazas 50px hacia abajo, y es lo que hace que aparezca el scroll, creo yo.

walvaRo · #5 (**permalink**) 22/10/2008, 09:53

En realidad da igual si hay margin o paddings, ocurre lo mismo siempre...

Mikmoro · #6 (**permalink**) 22/10/2008, 09:58

¿Cómo va a ocurrir lo mismo?

Elimina estas dos líneas y tu scroll desaparecerá:

#cuadro {
background-color:#dfdb00;
position:absolute;
margin: 50px 0px 0px 150px;
padding: 20px 5px 20px 40px;
width:450px;
height:100%;
}

tishu · #7 (**permalink**) 22/10/2008, 11:10

De momento lo he apañado con esto:

Código HTML:

if(navigator.appName == "Microsoft Internet Explorer")
{
	document.getElementById(id).style.width = (screen.width-20)+"px";
	document.getElementById(id).style.height = (screen.height-200)+"px";
}
else
{
	document.getElementById(id).style.height = "100%";
	document.getElementById(id).style.width = "100%";
}

Y algo ha mejorado.
Teniendo en el Body width y height al 100%, sigue sin funcionarme, mientras que, como comente antes, en una pagina nueva, he probado y funciona bien, por lo que creo que hay algun problema en la mezcla de tanto codigo.

walvaRo · #8 (**permalink**) 22/10/2008, 12:02

No Mikmoro, te equivocas... ya habia pensado en esa posibilidad, pero es independiente el margin que tenga el DIV por la parte superior, (como bien podrás ver en el código), si pruebas el codigo en firefox o explorer, etc..., verás que genera un extraño scroll...

Si alguien tiene alguna idea para solucionar esto, espero que me ayude!

Saludos!

Mikmoro · #9 (**permalink**) 22/10/2008, 12:17

Cita:

Iniciado por walvaRo

No Mikmoro, te equivocas...

Argggg, cómo me revienta que la gente haga esto.

¿Tú lo has probado o hablas de oidas?

Este es exactamente tu código eliminando los padding y los márgenes inferior y superior, y obviamente no verás ningún tipo de scroll:

http://www.araudi.net/forosdelweb/walvaRo.html