Líquido de la anchura del elemento de bloque de enlaces en posición fija de pie de página

Question

Estoy tratando de crear un fondo alineados, líquido de ancho pegajosa pie de página que contiene tres enlaces que están a la misma altura que el contenedor, que también han fluido anchos.

He creado un top alineado a la versión de este pie de página, donde los enlaces no están a la altura completa de su envase.Se rompe si me puse la parte inferior del recipiente a cero.He puesto el código para esta aquí:http://jsfiddle.net/bHJR3/1/

¿Cómo puedo modificar lo que tengo hasta el borde inferior del contenedor esté al ras con la parte inferior de la ventana, y los enlaces son de la misma altura que el recipiente?

Yo sé cómo hacerlo a través de jquery, pero estoy tratando de evitar js, si es posible.

Gracias por la ayuda.

EDITAR:He aquí una de jquery solución que se me ocurrió en el caso de no respuestas si alguien quiere ver. http://jsfiddle.net/bHJR3/2/

Answer 1

La razón por la que rompió cuando se establece bottom: 0 en #footer es porque todo lo que tiene dentro #footer había position: absolute.Los elementos con posición absoluta no ocupa espacio en el flujo de documentos y no la causa de su padre elementos para ampliar a los contengan.Ajuste de altura en #footer resuelve esto.Configuración height: 100% en el a etiquetas hará que el tamaño en relación a su elemento primario.Usted puede mantener div.content, pero también tendría que establecer height: 100% en él.

Agregar la siguiente regla CSS #footer:

bottom: 0;
height: 90px;

Agregar la siguiente regla CSS A:

height: 100%;
line-height: 90px; /* matches the height from #footer to vertically center the link text */

Quitar div.content.No parece necesario aquí.

Editar

Se puede centrar el pie de página añadir/cambiar el siguiente CSS en #footer:

width: 640px;
left: 50%; /* positions left edge of #footer to center of page */
margin-left: -320px; /* pulls footer to the left (width / 2) * -1 */

Editar

Usted puede usar max-width y una consulta de medios de comunicación para modificar el estilo de el pie de página si el ancho de la ventana es < 640px:

#footer {
    position: fixed;
    width: 100%;
    max-width: 640px;
    height: 114px;
    bottom:0;
    left: 50%;
    margin-left: -320px;
}

@media only screen and (max-width: 640px) {
    #footer {
        margin-left: auto;
        left: 0;
    }
}