Footer... margin-top: auto

[spaniol]

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?

[PHPau]

Mejor llenar la web de contenido que hacer una marranada para cuadrar un footer :S

[opzina]

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

[TEPO]

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).

[kseso?]

Esa estructura se conoce, entre otros nombres, como "pie abajo".
Hay varias técnicas para lograrlo.
Una muy simple:

Código CSS:

* {margin:0; padding:0;}
 
html, body { height: 100%;}
 
#contenedor {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -1em;
}
 
.empuje {height:1em;}
 
#pie {
min-height: 1em;
height: auto !important;
height: 1em;
}
 

y el html

Código HTML:

<div id="contenedor">
    <!-- Todo el contenido menos el pie -->
    <div class="empuje"></div>
</div>
<div id="footer">
    <!-- Contenido del pie -->
</div>
 

Puede verla en línea aquí

[opzina]

Iniciado por kseso?

Esa estructura se conoce, entre otros nombres, como "pie abajo".
Hay varias técnicas para lograrlo.
Una muy simple:

Código CSS:

* {margin:0; padding:0;}
 
html, body { height: 100%;}
 
#contenedor {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -1em;
}
 
.empuje {height:1em;}
 
#pie {
min-height: 1em;
height: auto !important;
height: 1em;
}
 

y el html

Código HTML:

<div id="contenedor">
    <!-- Todo el contenido menos el pie -->
    <div class="empuje"></div>
</div>
<div id="footer">
    <!-- Contenido del pie -->
</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.

[kseso?]

¿Cuál es la questión planteada?

Iniciado por spaniol

... 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...

Iniciado por opzina

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.

[opzina]

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.

[spaniol]

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.

[kseso?]

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