usar - ¿Cómo se puede definir un pie de página adhesivo de altura variable en CSS puro?
usar variable javascript en css (3)
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.
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)
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;
}
<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>
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
<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;
}