Foros del Web » Creando para Internet » CSS »

Sticky footer o pegar abajo siempre el footer

Estas en el tema de Sticky footer o pegar abajo siempre el footer en el foro de CSS en Foros del Web. Hola a todos, Acabo de empezar en CSS y quería presentar un caso básico pero que me está dando problemas con las soluciones básicas : ...
  #1 (permalink)  
Antiguo 14/10/2011, 03:47
 
Fecha de Ingreso: octubre-2010
Mensajes: 9
Antigüedad: 14 años, 2 meses
Puntos: 0
Sticky footer o pegar abajo siempre el footer

Hola a todos,

Acabo de empezar en CSS y quería presentar un caso básico pero que me está dando problemas con las soluciones básicas : El Sticky footer o que esté siempre abajo, hablando en plata :).

El tema es que una de las medidas que se toman es poner html y body {height: 100%}.
Ahora viene mi problema. Yo tengo 2 imágenes de fondo hechas con photoshop superpuestas y que me servirán de layout en mi web. Quiero que el footer vaya abajo a la derecha siempre, pero este layout tiene un poco scroll hacia abajo(en mi pantalla de portátil no cabe la imagen entera). Cuando hago html , body {height: 100%} digamos que se me recorta el layout y la parte de arriba no se ve.
Así pues, no sé cómo hacer para coloar el footer abajo sin que se me recorte el layout. Ideas?
Si son necesarios screenshots o el código sin problema, no los he introducido de momento ya que al ser este un problema común supongo que la respuesta será facil y no será un caso particular, aunque sí es cierto que no encontré nada por google.

Gracias de antemano y un saludo,

A.
  #2 (permalink)  
Antiguo 16/10/2011, 10:47
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años, 9 meses
Puntos: 21
Respuesta: Sticky footer o pegar abajo siempre el footer

Prueba con position fixed y bottom 0. (Disculpas esto es para otra cosa)

Código CSS:
Ver original
  1. * {
  2.     margin: 0;
  3. }
  4. html, body {
  5.     height: 100%;
  6. }
  7. .wrapper {
  8.     min-height: 100%;
  9.     height: auto !important;
  10.     height: 100%;
  11.     margin: 0 auto -142px;
  12. }
  13. .footer, .push {
  14.     height: 142px;
  15. }
__________________
_

Última edición por opzina; 16/10/2011 a las 10:57

Etiquetas: abajo, footer, html, pegar, siempre
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 19:42.