Problema con la implementación de CSS Sticky Footer

Tengo algunos problemas para hacer que Sticky Footer trabaje en mi sitio. Si el contenido es más pequeño que la ventana, el pie de página debe permanecer en la parte inferior de la ventana y el espacio muerto debe llenarse con un div. Creo que CSS Sticky Footer hace esto, pero no puedo hacer que el “empuje div” trabaje para empujar todo el contenido hacia abajo. Como puede ver, mi código no es solo body-wrapper-footer.

    body { color: #00FFFF; background-image: url("Images/img.gif"); font-size: 1em; font-weight: normal; font-family: verdana; text-align: center; padding: 0; margin: 0; } #banner-bg { width: 100%; height: 9em; background-image: url("Images/img2.gif"); background-repeat: repeat-x; position: absolute; top: 0; } #wrapper { width: 84em; margin-left: auto; margin-right: auto; } #header-bg { height: 16em; background-image: url("Images/header/header-bg.png"); } #content-bg { background-image: url("Images/img3.png"); background-repeat: repeat-y; } #content { margin-right: 2em; margin-left: 2em; } 

Estoy confundido acerca de dónde debería ir el código CSS Sticky Footer en mi caso.

Editar, aquí está lo que tengo y lo que quiero hacer: texto alternativo http://bayimg.com/image/gacniaacf.jpg

Tu HTML es un poco extraño. Por ejemplo, ¿por qué banner-bg ajusta a todo?

Dicho esto, para utilizar la técnica de pie de página adhesivo, debe envolver todo, excepto el pie de página, en un solo DIV. Por lo tanto, su etiqueta solo contendría dos DIV principales: wrapper y footer . Todas las cosas que tienes actualmente irían dentro de ese envoltorio DIV.

Tenga en cuenta que Sticky Footer puede no funcionar para usted si las imágenes de fondo que está utilizando incluyen áreas transparentes, ya que se basa en el fondo del wrapper cubierto por el encabezado.

Actualización: Ok, aquí está la versión que funciona. La hoja de estilo “Pie de página adhesivo ” está tomada de cssstickyfooter.com y debería funcionar en todos los navegadores modernos. He optimizado un poco tu HTML (no hay necesidad de capas de fondo separadas según tu imagen) pero puedes modificarlo como quieras siempre que mantengas la estructura básica en su lugar. Además, como no tengo tus imágenes, he agregado colores de fondo sólidos para fines ilustrativos, deberás eliminarlos.

       
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content

En lugar de modificar sus estilos existentes (o usar CSS Sticky Footer), es mucho más fácil para mí simplemente rehacerlo. Así que aquí va:

      
Lots of Content

Básicamente, el margen negativo debe coincidir con la altura del pie de página, se debe aplicar una altura del 100% a html / body, y debe declararse la posición relativa.

También en referencia al xHTML, observe cómo el divisor de “pie de página” no está DENTRO del div “contenedor”, sino más bien, fuera de él (de modo que hay 2 divs, contenedor y pie de página separados similares a un contenedor).

Si todavía tiene problemas, los principales problemas con su marcado son:

  • Se debe declarar el 100% de altura para html y body tag.
  • margen negativo falta en el contenedor div que es el # banner-bg
  • si el pie de página es de 100 px de alto, # banner-bg debe tener un margen inferior: -100 px
  • la posición debe ser relativa tanto en # banner-bg como en #footer

    html {altura: 100%;}

     body { color: #00FFFF; background-image: url("Images/img.gif"); font-size: 1em; font-weight: normal; font-family: verdana; text-align: center; padding: 0; margin: 0; height: 100%; } #banner-bg { width: 100%; height: 100%; background-image: url("Images/img2.gif"); background-repeat: repeat-x; position: relative; margin: 0 0 -200px 0; } #wrapper { width: 84em; margin-left: auto; margin-right: auto; } #header-bg { height: 16em; background-image: url("Images/header/header-bg.png"); } #content-bg { background-image: url("Images/img3.png"); background-repeat: repeat-y; } #content { margin-right: 2em; margin-left: 2em; } #footer { position: relative; height: 200px; } 

y el rest:

        

No estoy seguro de qué significa Sticky Footer cuando el contenido es más largo que la altura de la página … Si debería estar flotando sobre el texto mientras se desplaza, usaría Javascript para calcular las coordenadas inferiores y colocar el pie de página en una nueva capa en la posición fija. Esto también podría ser bastante fácil de usar entre navegadores …

Es genial poder implementar el pie de página adhesivo usando solo CSS y HTML, pero no soy partidario de ajustar mi estructura de marcado / documento para algo cosmético.

Yo prefiero un enfoque de JavaScript, sin degradación elegante. Si no hay JS, no hay pie de página adhesivo. Normalmente utilizo jQuery para implementar:

jQuery

 $(window).resize(function() { if ($('body').height() < $(window).height()) { $('#footer').addClass('fixed'); } else { $('#footer').removeClass('fixed'); } }).resize(); 

CSS

 #footer.fixed { position: fixed; bottom: 0; width: 100%; } 

Aquí puedes encontrar algunos códigos de la siguiente manera

Agregue las siguientes líneas de CSS a su hoja de estilo. El valor negativo para el margen en .wrapper es el mismo número que la altura de .footer y .push. El margen negativo siempre debe ser igual a la altura completa del pie de página (incluido cualquier margen o bordes que pueda agregar).

En CSS:

 height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; } .footer, .push { height: 4em; } 

Sigue esta estructura HTML Ningún contenido puede estar fuera de las tags div .wrapper y .footer a menos que esté absolutamente posicionado con CSS. Tampoco debe haber contenido dentro del .push div ya que es un elemento oculto que “empuja” hacia abajo el pie de página para que no se superponga a nada.

En HTML Body:

El contenido de su sitio web aquí.