Capa a pantalla completa con CSS

forosdelwebdr · #1 (**permalink**) 29/03/2008, 04:38

Hola,

Les consulto, para hacer una capa a pantalla completa hacemos width:100% y height:100% el tema sirve sólo para cuando la página solo abarca la parte visual del navegador, si abarca más como lo solucionan?

Saludos

juaniquillo · #2 (**permalink**) 29/03/2008, 09:44

en este mensaje Mikel explica como:
http://www.forosdelweb.com/f53/cosas...-fondo-467272/

forosdelwebdr · #3 (**permalink**) 29/03/2008, 16:22

Hola,

Gracias, pero lo he probado anteriormente y no funciona, ojo yo utilizo capas absolutas, que podrá ser, meto mal la mano nomás....

Saludos

Mikmoro · #4 (**permalink**) 29/03/2008, 18:01

¿Lo has probado el código tal y como está y no funciona? ¿o lo has probado ya con "capas" absolutas?
Quizá es que no hemos entendido bien tu pregunta. ¿Qué significa esta frase?:

Cita:

el tema sirve sólo para cuando la página solo abarca la parte visual del navegador, si abarca más como lo solucionan?

Si quiere decir lo que creo que quiere decir, en el ejemplo cuando el contenido abarca más del 100% todo crece sin más y el pie siempre sigue estando abajo del todo.
Si quieres decir que cuando la pantalla crece tu fondo o tu caja contenedora no crece con ella, es que tienes algún otro problema, para lo cual deberías poner el código para poder ayudarte.

Mikel.

P.D.: como he dicho otras veces, las cajas absolutas deben ser usadas con mucho cuidado, porque siempre son fuente de problemas si no sabes bien lo que haces.

forosdelwebdr · #5 (**permalink**) 31/03/2008, 16:55

Cita:

Iniciado por Mikmoro

¿Lo has probado el código tal y como está y no funciona? ¿o lo has probado ya con "capas" absolutas?
Quizá es que no hemos entendido bien tu pregunta. ¿Qué significa esta frase?:

Si quiere decir lo que creo que quiere decir, en el ejemplo cuando el contenido abarca más del 100% todo crece sin más y el pie siempre sigue estando abajo del todo.
Si quieres decir que cuando la pantalla crece tu fondo o tu caja contenedora no crece con ella, es que tienes algún otro problema, para lo cual deberías poner el código para poder ayudarte.

Mikel.

P.D.: como he dicho otras veces, las cajas absolutas deben ser usadas con mucho cuidado, porque siempre son fuente de problemas si no sabes bien lo que haces.

Sí si lo he probado pero la manera que necesito es distinto, se que había un topic que hablaba de utilizar hack _height, aunque igual no logro hacerlo funcionar les paso un ejemplo de la página:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Footer</title>
<style type="text/css">
* { margin: 0px;padding: 0px;}
html, body { height: 100%;}
#contenedor {
	position:absolute;
	background-color:#000000;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	_height:100%;
	width:100%;
}
 </style>
</head>
<body>
<div id="contenedor">&nbsp;</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>

Como ven no se expande a página completa mas que pantalla completa, eso era a lo que me referia.

Saludos

Mikmoro · #6 (**permalink**) 31/03/2008, 17:25

Mira, estás queriendo hacer una cosa muy rara: quieres tener la pantalla en negro, pero le pones el color de fondo negro a un contenedor, que luego cierras con un sólo espacio dentro, y luego lo llenas de (que por cierto, te falta la barra de cierre de cada etiqueta.) Así no puedes pintar de negro el fondo, porque el que tiene el fondo sólo mide un espacio.

Esto tiene dos soluciones muy simples: o le pones el negro al body, o cierras la caja (</div>) al final del documento.
En la css te sobran muchas cosas. Prueba esto:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Footer</title>
<style type="text/css">
* { margin: 0px;padding: 0px;}
html, body { }
#contenedor {
background-color:#000000;
width:100%;
}
</style>
</head>
<body>
<div id="contenedor"> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 </div>
</body>
</html>

Mikel.

forosdelwebdr · #7 (**permalink**) 01/04/2008, 14:53

Cita:

Iniciado por Mikmoro

Mira, estás queriendo hacer una cosa muy rara: quieres tener la pantalla en negro, pero le pones el color de fondo negro a un contenedor, que luego cierras con un sólo espacio dentro, y luego lo llenas de (que por cierto, te falta la barra de cierre de cada etiqueta.) Así no puedes pintar de negro el fondo, porque el que tiene el fondo sólo mide un espacio.

Esto tiene dos soluciones muy simples: o le pones el negro al body, o cierras la caja (</div>) al final del documento.
En la css te sobran muchas cosas. Prueba esto:

Mikel.

Hola Mike,

Gracias por la respuesta, lamentablemente no puedo poner el fondo negro ni cerrar el div al final, sería muy fácil entonces, probablemente lo has visto solamente y tal vez no lo comprendiste, el contenedor se expande a toda la pantalla porq tiene los attr css para hacerlo, pero a la pantalla visible solamente, los (q por cierto no se cierran) están para que genere un página más grande que la parte visible, de todas formas, actualmente estoy consiguiendolo via javascript, pero preferíria utilizar css.

Alguien a esbozado alguna solución a este tema

Saludos

Mikmoro · #8 (**permalink**) 01/04/2008, 15:14

Cita:

Iniciado por forosdelwebdr

Hola Mike,

Gracias por la respuesta, lamentablemente no puedo poner el fondo negro ni cerrar el div al final, sería muy fácil entonces, probablemente lo has visto solamente y tal vez no lo comprendiste, el contenedor se expande a toda la pantalla porq tiene los attr css para hacerlo, pero a la pantalla visible solamente, los (q por cierto no se cierran) están para que genere un página más grande que la parte visible, de todas formas, actualmente estoy consiguiendolo via javascript, pero preferíria utilizar css.

Alguien a esbozado alguna solución a este tema

Saludos

¿Los br no se cierran? querrás decir que no se parean , pero se cierran sin parear

No sé muy bien qué es lo que no he comprendido, pero si pones una caja con fondo negro al 100% de la pantalla, la cierras, y luego lo llenas de saltos de línea, es absolutamente inevitable que te ocurra lo que te ocurre (con css).

1.- los saltos de línea no pueden hacer crecer la caja si están fuera
2.- no puedes marcar un alto mayor "indeterminado" que la propia pantalla.
3.- los saltos de línea fuera de la caja obligan a ese fondo blanco, mejor dicho, al fondo que tenga el body.

Esto es sencillamente así. Lo siento, porque parece que te haya molestado.

Hasta la vista.

Mikel.

forosdelwebdr · #9 (**permalink**) 02/04/2008, 00:01

Cita:

Iniciado por Mikmoro

¿Los br no se cierran? querrás decir que no se parean , pero se cierran sin parear

No sé muy bien qué es lo que no he comprendido, pero si pones una caja con fondo negro al 100% de la pantalla, la cierras, y luego lo llenas de saltos de línea, es absolutamente inevitable que te ocurra lo que te ocurre (con css).

1.- los saltos de línea no pueden hacer crecer la caja si están fuera
2.- no puedes marcar un alto mayor "indeterminado" que la propia pantalla.
3.- los saltos de línea fuera de la caja obligan a ese fondo blanco, mejor dicho, al fondo que tenga el body.

Esto es sencillamente así. Lo siento, porque parece que te haya molestado.

Hasta la vista.

Mikel.

Hola Mikel,

Gracias por la respuesta de nuevo, no disculpa si me exprese mal, no para nada no me molesta, encima que consulto si me enojo sería un hipocrita, para nada, enojarse por tratar de aprender es de necios no? todo bien, pregunto por ahí alguien tiene la respuesta nada más.
Por el tema de cerrar las etiquetas no se cierran porque no es xhtml es html 4.01, en aquel entonces ni se conocía lo que era cerrar etiquetas, los saltos de linea son solamente para hacer la página más grande, podria poner, , <div>, etc, en realidad al ser un objeto con posición absoluta puede crecer lo que le indique indiferentemente, si le pones 1500px de alto y dependiendo cuanto ocupe en tu navaegador es probable que lo cubra a todo, en efecto es básicamente lo que hago a través de javascript, el alto no es aleatorio el que quiero conseguir es justamente el alto de la página completa pero por algún motivo, (desconocimiento mio, tal vez), solo me toma el alto visual de la página y no se extiende, por supuesto tampoco quiero recurrir a los "experimentos estilo expression" sino a algún estandar por así decir.

Bueno agradezco el apoyo y les dejo planteada la idea.

Sí no me entienden avisen que de ultima hago screen shot para mostrar el problema.

Saludos

Mikmoro · #10 (**permalink**) 02/04/2008, 03:36

Bien, de acuerdo: evidentemente al ser html la etiqueta br no se "tiene" que cerrar, pero de todos modos se "debe" cerrar, aunque queda a elección.

El problema es que el tamaño de la página sí es aleatorio, porque "el tamaño total de mi página" no es un tamaño cuantificable en cifras. Por eso digo aleatorio, porque no puedes saber cuánto mide, si no, podrías poner un 150%, o 1.500px como dices.

Con css es imposible decirle que algo ocupe todo lo que vaya a medir la página (sin saberlo), sin utilizar alguna etiqueta para ello. Bueno, en realidad si existe algo así para ponerle un fondo, y es la etiqueta body.

No tengo claro para qué necesitas eso, pero si pones un caso real concreto igual se podría encontrar una solución.

Mikel.

forosdelwebdr · #11 (**permalink**) 02/04/2008, 15:38

Cita:

Iniciado por Mikmoro

Bien, de acuerdo: evidentemente al ser html la etiqueta br no se "tiene" que cerrar, pero de todos modos se "debe" cerrar, aunque queda a elección.

El problema es que el tamaño de la página sí es aleatorio, porque "el tamaño total de mi página" no es un tamaño cuantificable en cifras. Por eso digo aleatorio, porque no puedes saber cuánto mide, si no, podrías poner un 150%, o 1.500px como dices.

Con css es imposible decirle que algo ocupe todo lo que vaya a medir la página (sin saberlo), sin utilizar alguna etiqueta para ello. Bueno, en realidad si existe algo así para ponerle un fondo, y es la etiqueta body.

No tengo claro para qué necesitas eso, pero si pones un caso real concreto igual se podría encontrar una solución.

Mikel.

Hola Mikel,

Gracias por la preocupación, al final buscandote un ejemplo mepa q hallé la solución, igual me gustaría saber si tienen alguna forma mejor de hacerlo, huddletogether.com/projects/lightbox/ si clickeas en las fotos ves el fondo semitransparente que abarca toda la página y a mi con css solo me abarcaba la parte visible, por eso lo emulaba con javascript.

Gracias nuevamente y les dejo saludos.

Mikmoro · #12 (**permalink**) 02/04/2008, 16:20

Claro, es que es eso lo que te quería decir.
¿Has visto la etiqueta <div id="wrapper"> que envuelve toda la página? Pues ahí está la cuestión. Como envuelve todo, cuando pongas contenido ella crecerá con su contenido, y siempre tendrá el 100% de la página, sea como sea de grande, y por eso podrás actuar sobre ella, poniéndole un color de fondo o lo que tú quieras.
Por eso te decía que cerraras tu div inicial (o poner otro antes que él), porque si no es imposible (con css).

No se trata de hacer eso son javascript, sino de poner un envoltorio que crezca con el conteido y listo.

Mikel.

madson · #13 (**permalink**) 27/07/2009, 05:39

sinmas la peña parece que toma el pelo o algo, y ai mas gente a la que le podria interesar lo que esta comentando como ami, que cuando el hegith de la pagina completa supere al de la resolucion de pantaya que tenemos, abra parte visual de la pagina que no se muestre mas que con el scroll, pero si pones un div absolute height 100% width100% contranspariencia para mostrarlo por encima de la web, al usar el scroll el div transparente subida con toda la web acia arriba y se mostrara el trozo de web que quedaba por debajo sin ese div.

un saludo

jomaruro · #14 (**permalink**) 27/07/2009, 15:46

Hola madson:

¿Te has fijado que el tema es de hace más de un año? Es mejor, sobretodo para tí, que plantees tu duda en un tema nuevo antes que revivir uno antiguo.

Saludos.