Maquetar dejando fijo el pie de página

nh2006 · #1 (**permalink**) 03/07/2013, 11:49

Hola amigos,

Necesito maquetar un sitio de como el siguiente: http://activ.com.mx/introduccion-a-m...ries-con-css3/

Tengo un encabezado (header) al borde superior de la ventana y el pie (footer) pegado al borde inferior de la ventana, en medio el contenido y cuando este sobrepasa el alto de contenedor le agrega una barra de desplazamiento vertical.

Código CSS:

Ver originalheader{
    margin: 0 0 1em 0;
    padding: 0.2em 0;
    width: auto;    
}
footer{
    padding: 2.5em 0;
    bottom: 0;
    position: fixed;
    width: 100%;
}
 
#contenido{
      overflow-y:visible;overflow-x:hidden;        
}

El html es similar a lo siguiente:

Código HTML:

Ver original<html lang="es">
<head>  
</head>
<body>
     <header>
     </header>
     <article ="contenido">
     </article>
    <footer>
     </footer>
</body>
</html>

No he logrado hacerlo pues cuando el contenido crece demasiado queda oculto por el footer, y si ven el enlace que les pasé, el contenido crece y baja el footer que a la vez está pegado a la parte inferior de la ventana.

Me ayudan con esto por favor?

Desde ya se los agradezco

pzin · #2 (**permalink**) 03/07/2013, 12:00

Bueno en el enlace que pusiste no usan posiciones fijas, sino que el contenido está dentro de un elemento el cual tiene un:

Código CSS:

Ver originaloverflow: scroll

Que es, visualmente, igual que un iframe.

ArturoGallegos · #3 (**permalink**) 03/07/2013, 12:17

no es que quede oculto, simplemente que no tiene background y por ende es transparente... lo que hace es que se empalma el contenido, agrégale un background de cualquier color y veras que queda visible.

también puedes probar con z-index en caso de ser necesario.

otros puntos:
- en el contenido no estas considerando la altura del footer por lo que siempre tendrás contenido que quede abajo de este por lo que nadie podrá visualizarlo.
- creo que <article ="contenido"> ??? quiero pensar que fue error al colocar el código aquí, de no ser así corrigelo.

nh2006 · #4 (**permalink**) 03/07/2013, 13:18

Cita:

Iniciado por nh2006

Les agradezco las respuestas, en efecto me equivoqué a la hora de escribir el mensaje original, olvidé colocar el id, pues ya había probado con ponerle un color de fondo previamente y en efecto el footer (que tiene una imagen de fondo )también queda sobre el contenido del <article>.

Creo que he logrado solventar un poco la situación gracias a lo de la altura del footer como lo menciona ArturoGallegos, la misma lógica aplicaría si quiesiera dejar fijo el footer?

aunque para ello el #contenido debería contener un scroll para que desplegara el contenido de forma similar a un iframe

Saludos