Foros del Web » Creando para Internet » CSS »

Footer... margin-top: auto

Estas en el tema de Footer... margin-top: auto en el foro de CSS en Foros del Web. Es posible de alguna forma? Obviamente con ponerlo en mi código no basta. Quiero que el footer esté lo más abajo posible en la página. ...
  #1 (permalink)  
Antiguo 05/10/2010, 05:24
 
Fecha de Ingreso: octubre-2009
Mensajes: 35
Antigüedad: 14 años, 5 meses
Puntos: 0
Footer... margin-top: auto

Es posible de alguna forma? Obviamente con ponerlo en mi código no basta. Quiero que el footer esté lo más abajo posible en la página. Si hay contenido en la página, no hay problema, porque baja solo al posicionarse abajo de ese contenido. Pero ¿qué apsa cuando el contenido es muy 'poco alto'? El footer queda con un gran vacío abajo. Eso no me sirve mucho y el "margin-top: auto" -me imagino ya sabían- no está ayudando mucho tampoco...

Alguien que se copa con alguna solución?
  #2 (permalink)  
Antiguo 05/10/2010, 05:27
 
Fecha de Ingreso: septiembre-2010
Ubicación: http://nomenrecordo.blogspot.com/
Mensajes: 111
Antigüedad: 13 años, 6 meses
Puntos: 1
Respuesta: Footer... margin-top: auto

Mejor llenar la web de contenido que hacer una marranada para cuadrar un footer :S
  #3 (permalink)  
Antiguo 05/10/2010, 05:44
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años
Puntos: 21
Respuesta: Footer... margin-top: auto

Para mi lo mejor para hacer eso sería poner todo dentro de un contenedor:

Código:
#contenedor {
	position: relative !important;
	min-width: 1080px;
	width: 100%;
	min-height: 900px;
	height: auto !important;
	height: 100%;
	padding-bottom: 40px !important;
}

#footer {	
	clear: both;
	width: 100%;
	position: relative;
	bottom: 0 !important;
	bottom: -1px;
	height: 260px;
	text-align: left;
	margin-top: 25px;
	margin-bottom: -50px;
}

#footer-content {
	width: 960px;
	height: inherit;
}
Código HTML:

<div id="contenedor"> //abro el contenedor

<div id="header">HEADER</div>
<div id="header">CONTENIDO PRINCIPAL</div>
<div id="header">FOOTER PEGADO AL CONTENEDOR</div>

</div> // Cierro el Contenedor
  #4 (permalink)  
Antiguo 05/10/2010, 05:54
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 14 años, 1 mes
Puntos: 23
Respuesta: Footer... margin-top: auto

Dale a tu contenedor, el que contiene el footer un alto con height, si asi no pasa nada proba colocando divs adicionales(esto no es recomendable), si no la solucion seria colocar el div del footer afuera del div de contenido, asi siempre te quedara abajo, bueno, ahora no tengo tiempo para escribirte el codigo, despues veo si te lo puedo pasar.
Un saludo.-

pd: margin-top: auto ?? no, en todo caso margin-top: xxx px; (eso si no te mueve todo lo de adentro, sino tenes que cambiar la estructura).
  #5 (permalink)  
Antiguo 05/10/2010, 06:05
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Footer... margin-top: auto

Esa estructura se conoce, entre otros nombres, como "pie abajo".
Hay varias técnicas para lograrlo.
Una muy simple:
Código CSS:
Ver original
  1. * {margin:0; padding:0;}
  2.  
  3. html, body { height: 100&#37;;}
  4.  
  5. #contenedor {
  6. min-height: 100%;
  7. height: auto !important;
  8. height: 100%;
  9. margin-bottom: -1em;
  10. }
  11.  
  12. .empuje {height:1em;}
  13.  
  14. #pie {
  15. min-height: 1em;
  16. height: auto !important;
  17. height: 1em;
  18. }
y el html
Código HTML:
Ver original
  1. <div id="contenedor">
  2.     <!-- Todo el contenido menos el pie -->
  3.     <div class="empuje"></div>
  4. </div>
  5. <div id="footer">
  6.     <!-- Contenido del pie -->
  7. </div>
Puede verla en línea aquí
  #6 (permalink)  
Antiguo 05/10/2010, 06:12
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años
Puntos: 21
Respuesta: Footer... margin-top: auto

Cita:
Iniciado por kseso? Ver Mensaje
Esa estructura se conoce, entre otros nombres, como "pie abajo".
Hay varias técnicas para lograrlo.
Una muy simple:
Código CSS:
Ver original
  1. * {margin:0; padding:0;}
  2.  
  3. html, body { height: 100%;}
  4.  
  5. #contenedor {
  6. min-height: 100%;
  7. height: auto !important;
  8. height: 100%;
  9. margin-bottom: -1em;
  10. }
  11.  
  12. .empuje {height:1em;}
  13.  
  14. #pie {
  15. min-height: 1em;
  16. height: auto !important;
  17. height: 1em;
  18. }
y el html
Código HTML:
Ver original
  1. <div id="contenedor">
  2.     <!-- Todo el contenido menos el pie -->
  3.     <div class="empuje"></div>
  4. </div>
  5. <div id="footer">
  6.     <!-- Contenido del pie -->
  7. </div>
Puede verla en línea aquí


Pero si lo hace así con poco contenido el footer le va a quedar pegado abajo y el contenido y el header muuuyy arriba. Si puedes mira mi rta. gracias.
  #7 (permalink)  
Antiguo 05/10/2010, 06:48
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Footer... margin-top: auto

¿Cuál es la questión planteada?
Cita:
Iniciado por spaniol Ver Mensaje
... Quiero que el footer esté lo más abajo posible en la página. Si hay contenido en la página, no hay problema, porque baja solo al posicionarse abajo de ese contenido. Pero ¿qué apsa cuando el contenido es muy 'poco alto'? El footer queda con un gran vacío abajo. Eso no me sirve mucho y el "margin-top: auto" -me imagino ya sabían- no está ayudando mucho tampoco...
Cita:
Iniciado por opzina Ver Mensaje
Pero si lo hace así con poco contenido el footer le va a quedar pegado abajo y el contenido y el header muuuyy arriba. Si puedes mira mi rta. gracias.
¿Hace eso o no lo hace el código publicado? En una situación muy concreta, como es poco contenido, el pie se posiciona en la parte inferior de la ventana del navegador. Con independencia del tamaño de la ventana.
¿Qué hay que mirar en su código?
Supongo que la trirepetición del id header será un despiste.
Ese código no posiciona el pie abajo, lo coloca inmediatamente después de su hermano, el /height:100%/ de /#contenedor/ no significa nada, bueno, mejor dicho, es cero porque su ancestro /body/ no tiene declarada altura. Forzará la aparición del escroll vertical en un gran número de pantallas por el /min-height:900px/ más el padding inferior.
En fin, que ha sido más su buena voluntad en ayudar que la efectividad.

Y por cierto, sobre la posición del header y resto de contenidos no era objeto de la consulta, creo.
  #8 (permalink)  
Antiguo 05/10/2010, 06:58
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años
Puntos: 21
Respuesta: Footer... margin-top: auto

la TRIREPETICION si es un despiste.

El scroll no aparece.

y a mi me funciona, por eso lo comparto.

Si usted ofrece una mejor opción, la tomare en cuenta.

Saludos.
  #9 (permalink)  
Antiguo 05/10/2010, 15:56
 
Fecha de Ingreso: octubre-2009
Mensajes: 35
Antigüedad: 14 años, 5 meses
Puntos: 0
Respuesta: Footer... margin-top: auto

Gracias a todos. Sobretodo Kseso que se mandó mansa explicación!

No me funcionó. Algo debo estar haciendo mal, aunque yo copié y pegué.

Qué excelente que tanta gente quisiera ayudarme, muchas gracias, en serio. Voy a venir más seguido.

Voy a probar las demás opciones, voy a repasar la que ya hice y de nuevo... muchas gracias.
  #10 (permalink)  
Antiguo 06/10/2010, 05:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Footer... margin-top: auto

spaniol:
Si publica sus códigos (html y css) quizás veamos qué ocurre y encontrar solución.
Mientras, puede también investigar otras formas, como las que hallará en www.araudi.net

Etiquetas: auto, footer, margin-top
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 07:11.