¿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.¿Cómo se puede definir un pie de página adhesivo de altura variable en CSS puro?

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, estará oculto" hasta que el usuario se desplace lo suficiente para verlo. "

Tenga en cuenta también que no necesito admitir navegadores heredados. Si CSS display: table & propiedades relacionadas aquí, son un juego limpio.

Fuente

2012-05-31 Alan H.

Todas las demás soluciones aquí están fuera de fecha y, o bien el uso de JavaScript, o table hacks.

Con la llegada del CSS flex model, resolver el problema del pie de página de altura variable se vuelve muy, muy fácil: aunque es más conocido por distribuir el contenido en horizontal, Flexbox funciona igual de bien para los problemas de disposición 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 simples que son el marcado y el CSS. Sin mesa piratea ni nada.

El modelo de flex es supported by all major browsers, así como supuestamente IE11 +, aunque mi IE todavía 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; 
 
}

<div id="wrapper"> 
 
    <div id="header">Title</div> 
 
    <div id="body">Body</div> 
 
    <div id="footer"> 
 
    Footer<br/> 
 
    of<br/> 
 
    variable<br/> 
 
    height<br/> 
 
    </div> 
 
</div>

Fuente

2014-10-25 00:18:44

Gracias por revivir esta pregunta con una técnica más nueva (si es menos compatible), completa con código ejecutable. A + –

De hecho. Quizás la mejor parte es que se degrada bien. –

esto no está funcionando en safari 8. – Mathias

Usted puede pegar el pie de página a la parte inferior de la ventana simplemente con:

position: fixed; 
bottom: 0;

Sin embargo, eso hará que parezca, incluso si hay contenido.

Para evitar esto, se necesita 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"; 
})();

(La envoltura (...)(); hace la función onscroll ser llamado una vez cuando se carga la página, ya que lo que se necesita también)
(La función anterior se ha probado , pero debería funcionar - si no es así, hágamelo saber y voy a hacer una prueba real de la página)

Fuente

2012-05-31 00:10:32

(...)(); es solo un autoejecutable, ¿no es así? –

Sí, básicamente hace que la función se llame una vez sin necesidad de un desplazamiento, y luego otra vez cada vez que se dispara un evento onscroll. –

¿Entonces esto no es correcto? "(El (...)(); envoltorio hace que se llame a la función onscroll una vez cuando se carga la página, ya que también es necesario)" –

la altura variable del pie hace que un pequeño problema, pero el siguiente debería funcionar:

<html> 
<head> 
<style type="text/css"> 
html { height: 100%; } 
body { min-height: 100%; } 
.container { min-height: 100%; position: relative; } 
.content { padding-bottom: 200px; } 
.footer { position: absolute; bottom: 0px; background: #ebebeb; text-align: centre; } 
</style> 
</head> 
<body> 
<div class="container"> 
    <div class="content"> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="footer"> 
     <p>This is my footer.</p> 
     <p>This is another line of my footer.</p> 
    </div> 
</div> 
</body> 
</html>

El relleno en la parte inferior de .content significa que el pie de página nunca se superpondrá con el contenido. Sin embargo, dado el pie de página será tamaños variables que haría uso de JavaScript para establecer dinámicamente el relleno en la parte inferior del contenido una vez al cargar la página o cada vez que cambie la altura del pie de página:

<script type="text/javascript"> 
$(function() { 
    $(".content").css("padding-bottom", parseInt($(".footer").height() + 20) + 'px'); 
}); 
</script>

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

Fuente

2012-05-31 00:49:45 Anthony

Puede hacer esto absolutamente en CSS puro. Clicky the linky.

Este concepto usa display: table-cell para organizar las secciones de su página en lugar de la normal display: block.

HTML

<body class="Frame"> 
    <header class="Row"><h1>Catchy header</h1></header> 
    <section class="Row Expand"><h2>Awesome content</h2></section> 
    <footer class="Row"><h3>Sticky footer</h3></footer> 
</body>

CSS

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

Fuente

2012-09-04 01:21:19 cereallarceny

Mientras que el código de ejemplo falta algo, sí, es posible con esta técnica. –

¡Tienes razón! He hecho mis ediciones para corregir esto, ¡me alegro de que funcionó para ti! – cereallarceny

No hay 'table-cell' en el ejemplo. ¿Querías 'table-row'? De todos modos, la forma moderna de hacerlo es usar el [CSS flexbox model] (https://stackoverflow.com/a/26558049/1269037). –

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

Respuesta

Cuestiones relacionadas