Div en todo el body

Frestolin · #1 (**permalink**) 05/07/2009, 17:46

No se como hacer que un div cubra todo el body y no toda la ventana, de tal forma que al hacer scroll aparezca en la parte que antes estaba oculta. poniendo height y width al 100% ocurre lo primero, se cubre toda la ventana, pero no todo el body, ¿Que he de hacer?

deirdre · #2 (**permalink**) 05/07/2009, 18:03

Quizás es que tienes que darle la medida del total que ocupe el body, en píxeles.

Como dices, el 100% es la altura de la ventana, no del body.

Bye

kseso? · #3 (**permalink**) 06/07/2009, 04:55

Cita:

css:
#tu_contenedor {width:100%; height: 100%}
html:
<body>
<div id="tu_contenedor">
...
</div>
</body>

Pero mejor, explica qué quieres hacer y el código con el que estás trabajando.

Un saludo

Frestolin · #4 (**permalink**) 06/07/2009, 06:18

En efecto, quiero darle la altura del body, pero ¿Como la averiguo?¿Quizá con JS?, el problema esta en que el body no siempre será igual de alto

Mikmoro · #5 (**permalink**) 06/07/2009, 14:27

Haz que crezca el div en cuestión y el body crecerá en consonancia, no lo contrario.

Como te han dicho, explica qué quieres conseguir exactamente.

Frestolin · #6 (**permalink**) 07/07/2009, 07:14

Código:

<body>
<div id="cubierta" style="position:absolute; top:0px; left:0px; height:??; width:??;"></div>

Contenido de la pagina...

</body>

Se trata de que el div "cubierta" cubra todo el contenido de la pagina, el div quedaría por encima del contenido de la pagina cubriéndolo en su totalidad aunque haya que hacer scroll para verlo por completo, ¿Se comprende?

Frestolin · #7 (**permalink**) 07/07/2009, 09:54

Me auto-contesto:

Código:

<head>

<script language="javascript">
function redimensionar(){
var alto = document.body.offsetHeight;
var altoventana =  window.innerHeight;
if(altoventana > alto){alto = altoventana;}
var ancho = document.body.offsetWidth;
var anchoventana =  window.innerWidth;
if(anchoventana > ancho){ancho = anchoventana;}
document.getElementById('cubrir').style.height = alto+'px';
document.getElementById('cubrir').style.width = ancho+'px';
}
function activar(){
redimensionar();
document.getElementById('cubrir').style.visibility = 'visible';
}
</script>

</head>
<body onresize="redimensionar()">

<div id="cubrir" style="position:absolute; top:0px; left:0px; background:url(images/background.png); z-index:2; visibility:hidden;">
</div>

Contenido de la p&aacute;gina...

 <input type="submit" name="activar" id="button3" value="Activar" onclick="activar()" />

</body>

Lo que ocurre es que el tema ya no encaja muy bien aqui, sino en el foro de JavaScript