Foros del Web » Creando para Internet » CSS »

Layout 100% altura de la ventana.

Estas en el tema de Layout 100% altura de la ventana. en el foro de CSS en Foros del Web. Hola amigos, hace mucho que no escribo en el foro, pero ahora tengo unas dudas. Estoy diseñando una web, modular con php, etc, etc. El ...
  #1 (permalink)  
Antiguo 14/10/2010, 17:56
 
Fecha de Ingreso: febrero-2004
Mensajes: 446
Antigüedad: 13 años, 10 meses
Puntos: 0
Layout 100% altura de la ventana.

Hola amigos, hace mucho que no escribo en el foro, pero ahora tengo unas dudas.
Estoy diseñando una web, modular con php, etc, etc.

El problema que tengo, es que no logro que la capa contenido ocupe el 100% de la página. Sin embargo, la capa layout si ocupa el 100% de la altura de la web.
He probado el truco de:
Código:
html,body {
height:100%;
}
Pero no funciona en ningún navegador salvo en Opera y en IE5.5

Mi capa contenido es la siguiente:
Código:
div#contenido{
    z-index:2;
    background-color:#FF9966;
    top:0px;
    left:0px;
    height:100%;
    width:880px;
    padding-left:20px;
    padding-bottom:150px;
    padding-top:20px;
    position:relative;
    margin:auto;
    }
Mi capa contenido está dentro de la capa layout:
Código:
div#layout{
	z-index:0;
	position:relative;
	margin:0 auto;
	width:100%;
	height:auto !important;
	height:100%;
	min-height:100%;
	background-color:#CC3333;
	}
He visto ejemplos como el de esta web:
http://www.rimset.org/

En el que la capa layout tiene un ancho determinado y un fondo con el que se simula que las capas de contenido llegan hasta abajo, pero aunque no es dificil de realizar este truco, me parece un rollo tener que aplicar soluciones así.

¿Alguien me puede ayudar?, ¿qué estoy haciendo mal?

¡Un saludo!
  #2 (permalink)  
Antiguo 15/10/2010, 06:57
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Layout 100% altura de la ventana.

Cita:
Iniciado por walvaRo Ver Mensaje
Hola amigos, hace mucho que no escribo en el foro, pero ahora tengo unas dudas.
Estoy diseñando una web, modular con php, etc, etc.

El problema que tengo, es que no logro que la capa contenido ocupe el 100% de la página. Sin embargo, la capa layout si ocupa el 100% de la altura de la web.
He probado el truco de:
Código:
...
He visto ejemplos como el de esta web:
http://www.rimset.org/

En el que la capa layout tiene un ancho determinado y un fondo con el que se simula que las capas de contenido llegan hasta abajo, pero aunque no es dificil de realizar este truco, me parece un rollo tener que aplicar soluciones así.

¿Alguien me puede ayudar?, ¿qué estoy haciendo mal?

¡Un saludo!
No he terminado de entender muy bien lo que pretende lograr, si lo que se conoce, entre otras formas, como "pie siempre abajo", si las "falsas columnas" o "columnas equilibradas" o un layout mezcla de los dos: página al 100% de alto (o pie siempre abajo) con columnas de igual altura en su interior.

En www.araudi.net y en http://bit.ly/am4HMs hay ejemplos (por separado) y con técnicas distintas para lograr lo mismo.

Quizás si nos explica un poco más a fondo qué quiere lograr algún forero pueda darle alguna respuesta más precisa.
  #3 (permalink)  
Antiguo 15/10/2010, 08:10
 
Fecha de Ingreso: febrero-2004
Mensajes: 446
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: Layout 100% altura de la ventana.

Una imagen vale mas que 1000 palabras.


Ese es el esquema de mi web, dentro de la capa contenido meteré mas capas para crear el diseño, etc... pero en general me interesa saber como hacer que la capa contenido llegue hasta abajo del todo.

He leido un monton de webs, tutoriales y trucos, y ninguno funciona.

Algo hago mal y no se que es.

En mi web he empleado un reset de css.
Y este es el código css creado por mi para mi web:

Código:
html,body{
	height:100%;
	}

body{
	background-color:#000000;
	padding:0px;
	margin:0px;
	overflow-x: hidden;
	}

body, div, p {
	font-family:Arial, Verdana, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
}

		/* ESTILOS ENLACES MENU */	
		a.enlacemenu:link, a:visited{
			font-size:24px;
			color:#000000;
			text-decoration:none;
			}
		a.enlacemenu:hover{
			color:#FFFFFF;
			text-decoration:none;
			}
		/*----------------------*/
		
		/* ESTILOS LISTA MENU */
		.ul{
			list-style:none;
			margin:0px;
			padding:0px;
			}
		li{
			display:inline;
			margin:10px;
			padding:10px;
			border:1px solid #000000;
			text-shadow:#0099CC;
			}
		/*----------------------*/

/* ESTRUCTURA DE LAS CAPAS */
div#layout{
	z-index:0;
	position:relative;
	margin:0 auto;
	width:100%;
	height:auto !important;
	height:100%;
	min-height:100%;
	background-color:#CC3333;
	}

div#header{
	z-index:1;
	background-image:url(img/header_fondo_01.jpg);
	background-repeat:repeat-x;
	background-attachment:scroll;
	background-position:left top;
	background-color:#FFFFFF;
	top:0px;
	left:0px;
	height:50px;
	width:100%;
	position:relative;
	border-top:1px solid;
	}

div#menu{
	z-index:2;
	background-image:url(img/menu_fondo_01.jpg);
	background-repeat:repeat-x;
	background-position:0px 0px 0px 0px;
	background-color:#ff6699;
	top:0px;
	left:0px;
	height:80px;
	width:880px;
	padding-top:20px;
	padding-left:20px;
	position:relative;
	margin:auto;
	overflow:hidden;
	}

div#contenido{
	z-index:2;
	background-color:#FF9966;
	top:0px;
	left:0px;
	height:100%;
	width:880px;
	padding-left:20px;
	padding-bottom:150px;
	padding-top:20px;
	position:relative;
	margin:auto;
	}

div#footer{
	z-index:3;
	position:absolute;
	width:100%;
	height:150px;
	bottom:0px;
	background-image:url(img/footer_fondo_01.jpg);
	background-position:left bottom;
	background-repeat:repeat-x;
	background-color:#996666;
	margin:auto;
	clear:both;
	}
/*----------------------*/
¿Estoy haciendo algo mal?, necesito algún consejo.

¡Mil gracias de antemano!
  #4 (permalink)  
Antiguo 15/10/2010, 10:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Layout 100% altura de la ventana.

Mire a ver si este ejemplo le sirve como guía:
http://bit.ly/ajv9gZ
Está realizado de forma rápida, sin verificar a fondo.
Cualquier duda comenta y vamos viendo.
  #5 (permalink)  
Antiguo 15/10/2010, 12:54
 
Fecha de Ingreso: febrero-2004
Mensajes: 446
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: Layout 100% altura de la ventana.

Hola, keseso, gracias por contestar.

Al ejemplo que me planteas le ocurre exactamente lo mismo que al mio.. La capa "contenido" no llegua hasta abajo del todo.. (a no ser que el contenido que contiene dicha capa sea suficientemente largo como para forzar que llegue abajo del todo).

¿Cómo podemos hacer que llegue abajo del todo independientemente del contenido?, imagina q está vacia... q no hay texto ni nada dentro de la capa.. como hacemos que se estire hasta abajo??

En tu ejemplo de "http://css.devillasbuenas.es/3columnas.html", ¿como haces que la capa central llegue abajo del todo?

Yo no lo logro...
  #6 (permalink)  
Antiguo 15/10/2010, 13:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Layout 100% altura de la ventana.

¿En qué navegador y resolución en vertical de monitor lo está viendo?
Porque testado en ff, chrome, opera, safari, ie9 beta, ie8-ie6 (emulados) yo lo veo así:


Uploaded with ImageShack.us
header de anchura 100%, pie siempre abajo y de anchura 100% y el cuerpo central ocupando toda la vertical que queda libre entre el header y el pie, con independencia de que su contenido sea poco o nada.

En caso de que su pantalla en vertical (o el contenido sea mínimo) sólo tiene que aumentar el valor absoluto del padding-bottom y el margin-bottom de #contenido, que ahora tiene unos valores de 500px/-500px. Cambie a 1000/-1000 px (o más) si su monitor es de gran altura.

Y el ejemplo que menciona, 3columnas.html, no está pensado para mantener el pie abajo en ausencia de poco o ningún contenido. Sólo es para hacer los divs de igual altura.

Hay otras realizaciones de "pie abajo" diferentes, pero cambiaría algo la estructura, pues usted marca dos colores para el fondo de la parte central, y el header y footer al 100% de anchura
  #7 (permalink)  
Antiguo 15/10/2010, 13:54
 
Fecha de Ingreso: febrero-2004
Mensajes: 446
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: Layout 100% altura de la ventana.

Hola de nuevo! pues yo la veo a una resolucion de 1920 x 1200.. De todas formas lo que yo quiero es ocupar el 100% dede la altura de la ventana, independientemente de que la capa esté vacia o de la resolución que se tenga.

Yo lo veo así:



La capa con color rojo de fondo es la capa que contiene todas las demás capas, es como el wrapp, o el layout base... en realidad esa será transparente.. pero de momento necesito ver las capas con colores para ver como se comportan y como se ubican.

¿Cómo hago para que se vea hasta abajo del todo?

Un saludo!
  #8 (permalink)  
Antiguo 15/10/2010, 15:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Layout 100% altura de la ventana.

Cito y aprovecho a corregir mi pequeña omisión que posíblemente le haya impedido ver donde radica el porqué de la diferente visión que obteníamos:
Cita:
Iniciado por kseso? Ver Mensaje
En caso de que su pantalla en vertical sea muy grande (o el contenido sea mínimo) sólo tiene que aumentar el valor absoluto del padding-bottom y del margin-bottom de #contenido, que ahora tiene unos valores de 500px/-500px. Cambie a 1000/-1000 px (o más) si su monitor es de gran altura.
  #9 (permalink)  
Antiguo 15/10/2010, 16:18
 
Fecha de Ingreso: febrero-2004
Mensajes: 446
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: Layout 100% altura de la ventana.

Hola de nuevo kseso..

Si el "padding-bottom" es de 1000 px o más, nunca un objeto, gráfico o texto que forme parte de la capa "CONTENEDOR", se podrá ver cerca del pie, siempre habrá una distancia exagerada, por lo tanto un "padding-bottom" tan exagerado no hace si no romper el diseño, no es un asolución apropiada.
El "padding-bottom" yo lo uso solo para evitar que el contenido de la capa "CONTENIDO" sea solapado por la capa "footer".

¿Cómo puedo hacer que la capa "CONTENIDO" llegue hasta abajo del todo aún estando vacia, y sin recurrir a exageraciones como usar 1000px de "padding-bottom", y sin utilizar trucos visuales con imagenes de fondo?

¡Un saludo y gracias de antemano!
  #10 (permalink)  
Antiguo 15/10/2010, 16:44
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Layout 100% altura de la ventana.

¿Probó a realizar los cambios sugeridos y explicitados en #contenido para que queden así?:
Código CSS:
Ver original
  1. margin:0 auto -1000px auto;
  2. padding:0 0 1000px 0;
o en su forma acortada.
Y si por variables locales (tamaño del monitor, de la fuente...) fuese insuficiente para que el color #FF9968 llegue hasta el pie, en vez de un valor /-1000/1000/ auméntelo a lo que necesite.

Creo que no lo ha intentado, pues si lo hubiese hecho ya habría visto que esa distancia exagerada que manifiesta NUNCA se produce.
¿Por qué? Pues porque el alto valor del padding inferior queda compensado por el mismo valor en negativo del margen inferior, y para evitar otros efectos, está definido el /overflow:hidden/

No quiero suponer que haya escrito su última respuesta sin poner nada de su parte, porque de haber sido así, sí que me molestaría esa actitud.

Cita:
no es un asolución apropiada
Siendo así, sólo me resta modificar el archivo enlazado en #4 con la variación que le indicaba en #6 y precisé en #8 y manifestarle que creo que en poco o en nada más puedo seguir ayudando.
  #11 (permalink)  
Antiguo 15/10/2010, 18:05
 
Fecha de Ingreso: febrero-2004
Mensajes: 446
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: Layout 100% altura de la ventana.

Hola Kseso !!!!!!

Perdon, resulta que en vez de:

1.
margin:0 auto -1000px auto;
2.
padding:0 0 1000px 0;

Puse:

1.
margin:0 auto 1000px auto;
2.
padding:0 0 1000px 0;

¡Y no me habia dado cuenta!
Creo que ahora por fin, si, ¡¡¡PORFIN!!! funciona.

Me has ayudado muchisimo. Te doy sinceramente las gracias, espero que este hilo ayude a muchos mas despistados.

Por cierto, he de añadir un pequeño comentario.

Para que la maquetación quede perfecta y el footer no solape la capa de "CONTENIDO", debemos recordar sumarle de manera extra al padding, el equivalente a la altura del footer:

En mi caso queda así:

1.
margin:0 auto -1000px auto;
2.
padding:0 0 1150px 0;


¡700 TRILLONES DE GRACIAS!
  #12 (permalink)  
Antiguo 16/10/2010, 07:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Layout 100% altura de la ventana.

Bien. Ya vamos coincidiendo.

Y no, no es necesario esa diferencia para evitar el solapamiento sobre /#pie/. Ese efecto queda anulado por /.corte/ Los valores (en absoluto) coincidentes entre su padding superior y la altura y margen superior de /#pie/ no son casuales.

Etiquetas: altura, layout, ventanas
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 00:10.