¿Cómo se puede definir un pie de página adhesivo de altura variable en CSS puro?

La clave a tener en cuenta aquí es que la altura del pie de página no va a ser fija, sino que variará con su contenido.

Cuando digo “pie de página adhesivo”, lo uso en lo que entiendo es la definición común de “un pie de página que nunca es más alto que la parte inferior de la ventana gráfica, pero si hay suficiente contenido, se ocultará hasta que el usuario se desplace abajo lo suficiente como para verlo “.

Tenga en cuenta también que no necesito admitir navegadores heredados. Si la display: table CSS display: table y las propiedades relacionadas ayudan aquí, son un juego justo.

Todas las otras soluciones aquí están desactualizadas y usan JavaScript o hacks de table .

Con el advenimiento del modelo CSS flex , resolver el problema del pie de página de altura variable se vuelve muy, muy fácil: si bien es más conocido por diseñar el contenido en la dirección horizontal, Flexbox realmente funciona igual de bien para los problemas de diseño vertical. Todo lo que tiene que hacer es envolver las secciones verticales en un contenedor flexible y elegir las que desea expandir. Tomarán automáticamente todo el espacio disponible en su contenedor.

Tenga en cuenta lo simple que son el marcado y el CSS. Sin mesa piratea ni nada.

El modelo flexible es compatible con todos los principales navegadores y supuestamente con IE11 +, aunque mi IE aún no muestra este fragmento correctamente.

 html, body { height: 100%; margin: 0; padding: 0; /* to avoid scrollbars */ } #wrapper { display: flex; /* use the flex model */ min-height: 100%; flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */ } #header { background: yellow; height: 100px; /* can be variable as well */ } #body { flex: 1; border: 1px solid orange; } #footer{ background: lime; } 
 
Body

Usted puede hacer esto absolutamente en CSS puro. Clicky el linky.

Este concepto usa display: table-cell organiza sus secciones de página en lugar de la display: block normal display: block .

HTML

  

Catchy header

Awesome content

Sticky footer

CSS

 .Frame { display: table; table-layout: fixed; height: 100%; width: 100%; } .Row { display: table-row; height: 1px; } .Row.Expand { height: auto; } 

Puede pegar el pie de página en la parte inferior de la ventana gráfica solo con:

 position: fixed; bottom: 0; 

Sin embargo, eso lo hará aparecer incluso si hay contenido.

Para evitar esto, necesitará algo de JavaScript:

 (window.onscroll = function() { var foot = document.getElementById('footer'); foot.style.position = "static"; if( foot.offsetTop < document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.offsetHeight - foot.offsetHeight) foot.style.position = "fixed"; })(); 

(El contenedor (...)(); hace que se llame a la función onscroll una vez cuando se carga la página, ya que también es necesario)
(La función anterior no se ha probado, pero debería funcionar, si no es así, házmelo saber y haré una página de prueba real)

La altura variable del pie de página causa un pequeño problema, pero lo siguiente debería funcionar:

      

Content

Content

Content

Content

Content

Content

Content

Content

Content

Content

Content

Content

Content

El relleno en la parte inferior de .content significa que el pie de página nunca se superpondrá con el contenido. Sin embargo, dado que su pie de página tendrá tamaños variables, usaría javascript para establecer dinámicamente el relleno en la parte inferior del contenido una vez en la carga de la página o cada vez que cambie la altura del pie de página:

  

Sé que dijiste CSS puro, pero no creo que haya una forma dada dada la altura variable y las condiciones de ocultación y adherencia. Creo que este es el método menos JavaScript.