Foros del Web » Creando para Internet » CSS »

Capa a pantalla completa con CSS

Estas en el tema de Capa a pantalla completa con CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/03/2008, 05:38
 
Fecha de Ingreso: enero-2008
Mensajes: 21
Antigüedad: 9 años, 11 meses
Puntos: 1
Capa a pantalla completa con CSS

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
  #2 (permalink)  
Antiguo 29/03/2008, 10:44
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Capa a pantalla completa con CSS

en este mensaje Mikel explica como:
http://www.forosdelweb.com/f53/cosas...-fondo-467272/
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #3 (permalink)  
Antiguo 29/03/2008, 17:22
 
Fecha de Ingreso: enero-2008
Mensajes: 21
Antigüedad: 9 años, 11 meses
Puntos: 1
Re: Capa a pantalla completa con CSS

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
  #4 (permalink)  
Antiguo 29/03/2008, 19:01
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Capa a pantalla completa con CSS

¿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.
  #5 (permalink)  
Antiguo 31/03/2008, 17:55
 
Fecha de Ingreso: enero-2008
Mensajes: 21
Antigüedad: 9 años, 11 meses
Puntos: 1
Re: Capa a pantalla completa con CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
¿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
  #6 (permalink)  
Antiguo 31/03/2008, 18:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Capa a pantalla completa con CSS

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 <br/> (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">&nbsp;
<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/></div>
</body>
</html>
Mikel.
  #7 (permalink)  
Antiguo 01/04/2008, 15:53
 
Fecha de Ingreso: enero-2008
Mensajes: 21
Antigüedad: 9 años, 11 meses
Puntos: 1
Re: Capa a pantalla completa con CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
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 <br/> (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 <br> (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
  #8 (permalink)  
Antiguo 01/04/2008, 16:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Capa a pantalla completa con CSS

Cita:
Iniciado por forosdelwebdr Ver Mensaje
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 <br> (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 <br></br>, pero se cierran sin parear <br/>

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.
  #9 (permalink)  
Antiguo 02/04/2008, 01:01
 
Fecha de Ingreso: enero-2008
Mensajes: 21
Antigüedad: 9 años, 11 meses
Puntos: 1
Re: Capa a pantalla completa con CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
¿Los br no se cierran? querrás decir que no se parean <br></br>, pero se cierran sin parear <br/>

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 <br> 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, <p>, <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
  #10 (permalink)  
Antiguo 02/04/2008, 04:36
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Capa a pantalla completa con CSS

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.
  #11 (permalink)  
Antiguo 02/04/2008, 16:38
 
Fecha de Ingreso: enero-2008
Mensajes: 21
Antigüedad: 9 años, 11 meses
Puntos: 1
Re: Capa a pantalla completa con CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
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.
  #12 (permalink)  
Antiguo 02/04/2008, 17:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Capa a pantalla completa con CSS

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.
  #13 (permalink)  
Antiguo 27/07/2009, 06:39
Avatar de madson  
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Capa a pantalla completa con CSS

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
  #14 (permalink)  
Antiguo 27/07/2009, 16:46
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Capa a pantalla completa con CSS

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.

Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:49.