ejemplos - CSS para hacer que el pie de página HTML permanezca en la parte inferior de la página con una altura mínima, pero no se superponga a la página
footer html5 css (21)
Tuve la siguiente página (deadlink: http://www.workingstorage.com/Sample.htm ) que tiene un pie de página que no puedo ubicar al final de la página.
Quiero que el pie de página
- pegarse a la parte inferior de la ventana cuando la página es corta y la pantalla no está llena, y
- permanezca en el extremo del documento y bájese de manera normal cuando haya más de una pantalla llena de contenido (en lugar de superponer el contenido).
El CSS se hereda y me confunde; Parece que no puedo cambiarlo correctamente para poner una altura mínima en el contenido o hacer que el pie de página vaya al final.
Un liner dinámico utilizando jQuery
Todos los métodos CSS que he encontrado son demasiado rígidos. Además, establecer el pie de página en fixed no es una opción si eso no es parte del diseño.
Probado en:
- Cromo: 60
- FF: 54
- IE: 11
Asumiendo este diseño:
<html>
<body>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
Utilice la siguiente función jQuery:
$(''#content'').css("min-height", $(window).height() - $("#footer").height() + "px");
Lo que eso hace es establecer la min-height #content para el #content de #content a la altura de la ventana , la altura del pie de página, lo que podría ser en ese momento.
Dado que usamos min-height , si #content height excede la altura de la ventana , la función se degrada con gracia y no tiene ningún efecto ya que no es necesaria.
Véalo en acción:
$("#fix").click(function() {
$(''#content'').css("min-height", $(window).height() - $("#footer").height() + "px");
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background: #111;
}
body {
text-align: center;
background: #444
}
#content {
background: #999;
}
#footer {
background: #777;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="content">
<p>Very short content</p>
<button id="fix">Fix it!</button>
</div>
<div id="footer">Mr. Footer</div>
</body>
</html>
El mismo fragmento en JsFiddle
Prima:
Podemos llevar esto más lejos y hacer que esta función se adapte al tamaño dinámico de la altura del visor de la siguiente manera:
$(window).resize(function() {
$(''#content'').css("min-height", $(window).height() - $("#footer").height() + "px");
}).resize();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background: #111;
}
body {
text-align: center;
background: #444
}
#content {
background: #999;
}
#footer {
background: #777;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="content">
<p>Very short content</p>
</div>
<div id="footer">Mr. Footer</div>
</body>
</html>
Aquí están mis dos centavos. En comparación con otras soluciones, no es necesario agregar contenedores adicionales. Por eso esta solución es un poco más elegante. Debajo del código de ejemplo explicaré por qué esto funciona.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
html
{
height:100%;
}
body
{
min-height:100%;
padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
margin:0; /*see above comment*/
}
body
{
position:relative;
padding-bottom:60px; /* Same height as the footer. */
}
footer
{
position:absolute;
bottom:0px;
height: 60px;
background-color: red;
}
</style>
</head>
<body>
<header>header</header>
<footer>footer</footer>
</body>
</html>
Entonces, lo primero que hacemos es crear el contenedor más grande (html) al 100%. La página html es tan grande como la propia página. A continuación, establecemos la altura del cuerpo, puede ser más grande que el 100% de la etiqueta html, pero al menos debe ser tan grande, por lo tanto, usamos min-height 100%.
También hacemos el cuerpo pariente. Relativo significa que puede mover el elemento de bloque alrededor de relativo desde su posición original. Aunque no usamos eso aquí. Porque relativo tiene un segundo uso. Cualquier elemento absoluto es absoluto para la raíz (html) o para el primer padre / abuelo relativo. Eso es lo que queremos, queremos que el pie de página sea absoluto, en relación con el cuerpo, es decir, la parte inferior.
El último paso es establecer el pie de página en absoluto y abajo: 0, que lo mueve al final del primer padre / abuelo que es relativo (cuerpo de curso).
Ahora todavía tenemos un problema que solucionar, cuando llenamos la página completa, el contenido se encuentra debajo del pie de página. ¿Por qué? bueno, porque el pie de página ya no está dentro del "flujo html", porque es absoluto. Entonces, ¿cómo arreglamos esto? Añadiremos relleno de fondo al cuerpo. Esto asegura que el cuerpo sea realmente más grande que su contenido.
Espero haberte dejado muy claro para ustedes.
Así es como resolví el mismo problema.
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
<div class="demo">
<h1>CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
Desde IE7 en adelante puedes usar simplemente
#footer {
position:fixed;
bottom:0;
}
Vea caniuse para soporte.
Esto se conoce como un pie de página pegajoso. Una búsqueda en Google para él viene con muchos resultados. Un CSS Sticky Footer es el que he usado con éxito. Pero hay más.
css:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
html:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
Hacer esto
<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>
También puede leer sobre flex it. Es compatible con todos los navegadores modernos.
Actualización : leí sobre flex y lo probé. Funcionó para mí. Espero que haga lo mismo por ti. Aquí es cómo implementé. Aquí no es el ID principal es el div
body {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
display: block;
flex: 1 0 auto;
}
Aquí puede leer más sobre flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Tenga en cuenta que no es compatible con versiones anteriores de IE.
He desarrollado un método bastante fácil para pegar el pie de página en la parte inferior, pero como los métodos más comunes, tendrá que modificarlo para que se ajuste a la altura de su pie de página.
VER DEMO
Este método a continuación utiliza un "truco" colocando un ::after pseudo-elemento en el body , y configúralo para que tenga la altura exacta del pie de página, por lo que ocupará exactamente el mismo espacio que el pie de página, por lo que cuando el pie de página está posicionado absolute sobre él, parecería que el pie de página realmente está ocupando espacio y eliminando los efectos negativos de su posicionamiento absoluto (por ejemplo, repasar el contenido del cuerpo)
HTML (marcado común básico)
html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }
/* Trick: */
body {
position: relative;
}
body::after {
content: '''';
display: block;
height: 50px; /* Set same as footer''s height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
<body>
<header>Header</header>
<article>Content</article>
<footer>Footer</footer>
</body>
Los siguientes métodos permiten alturas dinámicas de pie de página:
Usando flexbox
html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }
/* Trick */
body{
display:flex;
flex-direction:column;
}
footer{
margin-top:auto;
}
<body>
<header>Header</header>
<article>Content</article>
<footer>Footer</footer>
</body>
Usando el diseño de la tabla
html,body { height: 100%; margin: 0; }
header {
height: 50px;
background: lightcyan;
}
footer {
height: 50px;
background: PapayaWhip;
}
/**** Trick: ****/
body {
display: table;
width: 100%;
}
footer {
display: table-row;
}
<body>
<header>Header</header>
<article>Content</article>
<footer>Footer</footer>
</body>
He usado esto para pegar mi pie de página al fondo y funcionó para mí:
HTML
<body>
<div class="allButFooter">
<!-- Your page''s content goes here, including header, nav, aside, everything -->
</div>
<footer>
<!-- Footer content -->
</footer>
</body>
Esa es la única modificación que debes hacer en el HTML, agrega ese div con la clase "allButFooter" . Lo hice con todas las páginas, aquellas que eran tan cortas, sabía que el pie de página no se pegaba al fondo, y también páginas lo suficientemente largas como para saber que tenía que desplazarme. Hice esto, por lo que pude ver que funciona bien en el caso de que el contenido de una página sea dinámico.
CSS
.allButFooter {
min-height: calc(100vh - 40px);
}
La clase "allButFooter" tiene un valor de min-height que depende de la altura de la ventana 100vh ( 100vh significa 100% de la altura de la ventana 100vh ) y la altura del pie de página, que ya sabía que era 40px .
Eso es todo lo que hice, y funcionó perfectamente para mí. No lo he probado en todos los navegadores, solo Firefox, Chrome y Edge, y los resultados fueron los que quería. El pie de página se adhiere a la parte inferior, y no tiene que meterse con el índice z, la posición o cualquier otra propiedad. La posición de cada elemento en mi documento era la posición predeterminada, no la cambié a absoluta ni fija ni nada.
Trabajando con diseño responsivo
Aquí hay algo que me gustaría aclarar. Esta solución, con el mismo pie de página que tenía una altura de 40px, no funcionó como esperaba cuando trabajaba en un diseño sensible utilizando Twitter-Bootstrap . Tuve que modificar el valor que estaba restando en la función:
.allButFooter {
min-height: calc(100vh - 95px);
}
Probablemente esto se deba a que Twitter-Bootstrap viene con sus propios márgenes y rellenos, por eso tuve que ajustar ese valor.
Espero que esto sea de alguna utilidad para ustedes! Al menos, es una solución simple de probar y no implica hacer grandes cambios en todo el documento.
He utilizado en mis muchos proyectos y nunca tuve un solo problema :)
Para su referencia, el código está en el fragmento.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer''s height */
background:green;
}
.footer, .push {
height: 50px; /* .push must be the same height as .footer */
}
.footer{
background:gold;
}
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="wrapper">
Content Area
</div>
<div class="push">
</div>
<div class="footer">
Footer Area
</div>
</body>
</html>
Mi método de jQuery, este coloca el pie de página en la parte inferior de la página si el contenido de la página es menor que la altura de la ventana, o simplemente coloca el pie de página después del contenido de lo contrario:
Además, mantener el código en su propio gabinete antes de que otro código reduzca el tiempo necesario para reposicionar el pie de página.
(function() {
$(''.footer'').css(''position'', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
Puedes hacerlo
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
Simplemente configure el html, el cuerpo y las otras filas, excepto el pie de página, al 100%. p.ej
<body>
<header></header>
<content></content>
<footer></footer>
el css se convierte
html, body, header, content{
height:100%;
}
Sin embargo, otra solución realmente simple es esta:
html, body {
height: 100%;
width: 100%;
margin: 0;
display: table;
}
footer {
background-color: grey;
display: table-row;
height: 0;
}
El truco es usar una display:table para todo el documento y display:table-row con height:0 para el pie de página.
Dado que el pie de página es el único elemento secundario del cuerpo que se muestra como table-row , se representa en la parte inferior de la página.
Solo personaliza la sección de pie de página.
.footer
{
position: absolute;
bottom: 0;
padding: 1rem;
text-align: center;
}
<div class="footer">
Footer is always bootom
</div>
Un enfoque muy simple que funciona muy bien en varios navegadores es este:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
Un método simple es hacer que el cuerpo sea el 100% de su página, con una min-height del 100% también. Esto funciona bien si la altura de su pie de página no cambia.
Dale al pie de página un margen negativo superior:
#footer {
clear: both;
position: relative;
height: 40px;
margin-top: -40px;
}
Una cosa a tener en cuenta es los dispositivos móviles, ya que implementan la idea de la ventana gráfica de una manera "inusual":
Como tal, utilizando position: fixed; (como he visto recomendado en otros lugares) por lo general no es el camino a seguir. Por supuesto, depende del comportamiento exacto que está buscando.
Lo que he usado, y ha funcionado bien en computadoras de escritorio y móviles, es:
<body>
<div id="footer"></div>
</body>
con
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}
#footer {
position: absolute;
bottom: 0;
}
Una solución flexible muy simple que no asume alturas fijas o cambios de posición de los elementos.
HTML
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
CSS
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
Soporte del navegador
Todos los principales navegadores, excepto IE11 y anteriores.
Asegúrese de usar Autoprefixer para los prefijos apropiados.
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
main {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
/////////////////////////////////////////////
header,
main,
footer {
margin: 0;
display: block;
}
header,
footer {
min-height: 80px;
}
header {
background-color: #ccc;
}
main {
background-color: #f4f4f4;
}
footer {
background-color: orange;
}
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
Yo mismo he estado investigando este problema. He visto bastantes soluciones y cada una de ellas tenía problemas, a menudo con algunos números mágicos.
Entonces, utilizando las mejores prácticas de varias fuentes, se me ocurrió esta solución:
http://jsfiddle.net/vfSM3/248/
Lo que quería lograr específicamente aquí era lograr que el contenido principal se desplazara entre el pie de página y el encabezado dentro del área verde.
Aquí hay un css simple:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
header {
height: 4em;
background-color: red;
position: relative;
z-index: 1;
}
.content {
background: white;
position: absolute;
top: 5em;
bottom: 5em;
overflow: auto;
}
.contentinner {
}
.container {
height: 100%;
margin: -4em 0 -2em 0;
background: green;
position: relative;
overflow: auto;
}
footer {
height: 2em;
position: relative;
z-index: 1;
background-color: yellow;
}
Una solución simple que yo uso, funciona desde IE8 +
Indique min-height: 100% en html para que, si el contenido es menor, la página fija tome la altura completa del puerto de visualización y el pie de página quede al pie de la página. Cuando el contenido aumenta, el pie de página se desplaza hacia abajo con el contenido y sigue pegado a la parte inferior.
JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/
Css
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
Html
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
footer {
margin-top:calc(5% + 60px);
}
Esto funciona bien