css - siempre - pie de pagina web ejemplos
¿Cómo conseguir que el pie de página se quede en la parte inferior de una página web? (23)
Tengo un diseño simple de 2 columnas con un pie de página que borra tanto el div derecho como el izquierdo en mi marca. Mi problema es que no puedo hacer que el pie de página permanezca en la parte inferior de la página en todos los navegadores. Funciona si el contenido empuja el pie hacia abajo, pero ese no es siempre el caso.
Actualizar:
No está funcionando correctamente en Firefox. Estoy viendo una franja de color de fondo debajo del pie de página cuando no hay suficiente contenido en la página para empujar el pie de página hasta el fondo de la ventana del navegador. Desafortunadamente, este es el estado predeterminado de la página.
Pie de página pegajoso con display: flex
Solución inspirada en el pie de página pegajoso de Philip Walton .
Explicación
Esta solución es válida solo para :
- Cromo ≥ 21.0
- Firefox ≥ 20.0
- Internet Explorer ≥ 10
- Safari ≥ 6.1
Se basa en la pantalla flex , que aprovecha la propiedad flex-grow , que permite que un elemento crezca en altura o anchura (cuando la flow-direction del flow-direction se establece en una column o row respectivamente), para ocupar el espacio adicional en el contenedor .
También aprovecharemos la unidad vh , donde 1vh se define como :
1/100 de la altura del viewport
Por lo tanto, una altura de 100vh es una forma concisa de decirle a un elemento que abarque la altura de la vista completa.
Así es como estructurarías tu página web:
----------- body -----------
----------------------------
---------- footer ----------
----------------------------
Para que el pie de página se pegue a la parte inferior de la página, desea que el espacio entre el cuerpo y el pie de página crezca tanto como sea necesario para empujar el pie de página en la parte inferior de la página.
Por lo tanto nuestro diseño se convierte en:
----------- body -----------
----------------------------
---------- spacer ----------
<- This element must grow in height
----------------------------
---------- footer ----------
----------------------------
Implementación
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.spacer {
flex: 1;
}
/* make it visible for the purposes of demo */
.footer {
height: 50px;
background-color: red;
}
<body>
<div class="content">Hello World!</div>
<div class="spacer"></div>
<footer class="footer"></footer>
</body>
Puedes jugar con él en el JSFiddle .
Peculiaridades de safari
Tenga en cuenta que Safari tiene una implementación defectuosa de la propiedad flex-shrink , que permite que los elementos se reduzcan más que la altura mínima que se requeriría para mostrar el contenido. Para solucionar este problema, deberá establecer la propiedad flex-shrink explícitamente en 0 para el .content y el footer de footer en el ejemplo anterior:
.content { flex-shrink: 0; }
.footer { flex-shrink: 0; }
Solución flexbox
El diseño flexible es preferido para las alturas naturales de encabezado y pie de página. Esta solución flexible se ha probado en navegadores modernos y en realidad funciona :) en IE11.
HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS
html {
height: 100%;
}
body {
height: 100%;
min-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
flex-shrink: 0;
}
header,
footer {
flex: none;
}
¡Usa unidades CSS vh!
Probablemente, la forma más obvia y no truculenta de manejar un pie de página pegajoso sería utilizar las nuevas unidades de la vista de css .
Tomemos por ejemplo el siguiente marcado simple:
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>
Si el encabezado es de 80px de altura y el pie de página es de 40px de altura, entonces podemos hacer que nuestro pie de página se pegue con una sola regla en la división de contenido:
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
}
Lo que significa: deje que la altura del div contenido sea al menos el 100% de la altura de la ventana gráfica menos las alturas combinadas del encabezado y pie de página.
Eso es.
* {
margin:0;
padding:0;
}
header {
background: yellow;
height: 80px;
}
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
background: pink;
}
footer {
height: 40px;
background: aqua;
}
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>
... y aquí es cómo funciona el mismo código con gran cantidad de contenido en la división de contenido:
* {
margin:0;
padding:0;
}
header {
background: yellow;
height: 80px;
}
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
background: pink;
}
footer {
height: 40px;
background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
This is my footer
</footer>
NÓTESE BIEN:
1) La altura del encabezado y pie de página debe ser conocida.
2) Las versiones anteriores de IE (IE8-) y Android (4.4-) no admiten unidades de ventana gráfica. ( caniuse )
3) Érase una vez el webkit tenía un problema con las unidades de la ventana gráfica dentro de una regla de cálculo. De hecho, esto se ha solucionado ( ver aquí ), por lo que no hay problema allí. Sin embargo, si está buscando evitar el uso de calc por algún motivo, puede evitarlo utilizando márgenes negativos y rellenos con tamaño de caja.
Al igual que:
* {
margin:0;padding:0;
}
header {
background: yellow;
height: 80px;
position:relative;
}
.content {
min-height: 100vh;
background: pink;
margin: -80px 0 -40px;
padding: 80px 0 40px;
box-sizing:border-box;
}
footer {
height: 40px;
background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum
</div>
<footer>
This is my footer
</footer>
Antes no tenía suerte con las soluciones sugeridas en esta página, pero finalmente, este pequeño truco funcionó. Lo incluiré como otra posible solución.
footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
Aquí hay una solución con jQuery que funciona como un encanto. Comprueba si la altura de la ventana es mayor que la altura del cuerpo. Si es así, cambia el margen superior del pie de página para compensar. Probado en Firefox, Chrome, Safari y Opera.
$( function () {
var height_diff = $( window ).height() - $( ''body'' ).height();
if ( height_diff > 0 ) {
$( ''#footer'' ).css( ''margin-top'', height_diff );
}
});
Si su pie de página ya tiene un margen superior (de 50 píxeles, por ejemplo), necesitará cambiar la última parte por:
css( ''margin-top'', height_diff + 50 )
CSS:
#container{
width: 100%;
height: 100vh;
}
#container.footer{
float:left;
width:100%;
height:20vh;
margin-top:80vh;
background-color:red;
}
HTML:
<div id="container">
<div class="footer">
</div>
</div>
Esto debería hacer el truco si está buscando un pie de página con respuesta alineado en la parte inferior de la página, que siempre mantenga un margen superior del 80% de la altura de la ventana gráfica.
Como todavía no se ha presentado la solución Grid , aquí está, con solo dos declaraciones para el elemento padre , si tomamos la height: 100% y el margin: 0 por supuesto:
html, body {height: 100%}
body {
display: grid; /* generates a block-level grid */
align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
margin: 0;
}
.content {
background: lightgreen;
/* demo / for default snippet window */
height: 1em;
animation: height 2.5s linear alternate infinite;
}
footer {background: lightblue}
@keyframes height {to {height: 250px}}
<div class="content">Content</div>
<footer>Footer</footer>
Los artículos se distribuyen uniformemente dentro del contenedor de alineación a lo largo del eje transversal. El espacio entre cada par de elementos adyacentes es el mismo. El primer elemento está alineado con el borde de inicio principal, y el último elemento está alineado con el borde de inicio principal.
Establezca el CSS para #footer a:
position: absolute;
bottom: 0;
A continuación, deberá agregar un padding o margin en la parte inferior de su #sidebar y #content para que coincida con la altura de #footer o cuando se superpongan, el #footer los cubrirá.
Además, si recuerdo correctamente, IE6 tiene un problema con la bottom: 0 CSS. Es posible que tengas que usar una solución JS para IE6 (si te importa IE6).
He creado una biblioteca muy simple https://github.com/ravinderpayal/FooterJS
Es muy simple de usar. Después de incluir la biblioteca, simplemente llame a esta línea de código.
footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));
Los pies de página se pueden cambiar dinámicamente recordando la función anterior con diferentes parámetros / id.
footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));
Nota: - No tienes que alterar o agregar ningún CSS. La biblioteca es dinámica, lo que implica que incluso si se cambia el tamaño de la pantalla después de cargar la página, la posición se restablecerá. He creado esta biblioteca, porque CSS resuelve el problema por un tiempo, pero cuando el tamaño de la pantalla cambia significativamente, desde el escritorio a la tableta o viceversa, o bien se superponen al contenido o ya no se quedan pegajosos.
Otra solución es CSS Media Queries, pero tiene que escribir manualmente diferentes estilos CSS para diferentes tamaños de pantallas, mientras que esta biblioteca realiza su trabajo automáticamente y es compatible con todos los navegadores básicos compatibles con JavaScript.
Editar solución CSS:
@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
/* For mobile phones: */
#footer {
width: 100%;
position:fixed;
bottom:0;
}
}
Ahora, si la altura de visualización es mayor que la longitud de su contenido, haremos que el pie de página se fije en la parte inferior y, de lo contrario, aparecerá automáticamente al final de la visualización, ya que debe desplazarse para verlo.
Y, parece una solución mejor que JavaScript / library one.
Intente colocar un div contenedor (con desbordamiento: automático) alrededor del contenido y la barra lateral.
Si eso no funciona, ¿tiene capturas de pantalla o enlaces de ejemplo donde el pie de página no se muestra correctamente?
Las soluciones flexibles funcionaron para que el pie de página quedara pegajoso, pero desafortunadamente, cambiar el cuerpo para usar el diseño flexible hizo que algunos de nuestros diseños de página cambiaran, y no para mejor. Lo que finalmente me funcionó fue:
jQuery(document).ready(function() {
var fht = jQuery(''footer'').outerHeight(true);
jQuery(''main'').css(''min-height'', "calc(92vh - " + fht + "px)");
});
Obtuve esto de la respuesta de ctf0 en https://css-tricks.com/couple-takes-sticky-footer/
Múltiples personas han expresado la respuesta a este simple problema aquí, pero tengo una cosa que agregar, considerando lo frustrada que estaba hasta que descubrí lo que estaba haciendo mal.
Como se mencionó, la forma más sencilla de hacerlo es así ...
html {
position: relative;
min-height: 100%;
}
body {
background-color: transparent;
position: static;
height: 100%;
margin-bottom: 30px;
}
.site-footer {
position: absolute;
height: 30px;
bottom: 0px;
left: 0px;
right: 0px;
}
Sin embargo, la propiedad que no se menciona en las publicaciones, presumiblemente porque suele ser la predeterminada, es la posición: estática en la etiqueta del cuerpo. Posición relativa no funcionará!
Mi tema de wordpress había anulado la visualización del cuerpo por defecto y me confundió durante un tiempo desagradable.
Ninguna de estas soluciones css puras funciona correctamente con el cambio de tamaño dinámico del contenido (al menos en Firefox y Safari), por ejemplo, si tiene un fondo configurado en el contenedor div, la página y luego redimensione (agregando algunas filas) la tabla dentro del div, el la tabla puede sobresalir de la parte inferior del área con estilo, es decir, puede tener la mitad de la tabla en blanco sobre negro y la mitad de la tabla completa en blanco porque tanto el color de fuente como el color de fondo son blancos. Básicamente, no se puede arreglar con las páginas de los programadores.
El diseño de varias columnas de div anidado es un truco feo y el div de cuerpo / contenedor 100% de altura mínima para el pie de página pegado es un truco más feo.
La única solución sin script que funciona en todos los navegadores que he probado: una tabla mucho más simple / corta con thead (para encabezado) / tfoot (para pie de página) / tbody (td para cualquier número de columnas) y 100% de altura. Pero esto ha percibido desventajas semánticas y de SEO (tfoot debe aparecer antes de tbody. Sin embargo, los roles ARIA pueden ayudar a los motores de búsqueda decentes).
Para esta pregunta, muchas de las respuestas que he visto son torpes, difíciles de implementar e ineficientes, así que pensé en intentarlo y crear mi propia solución, que es solo un poquito de css y html.
html,
body {
height: 100%;
margin: 0;
}
.body {
min-height: calc(100% - 2rem);
width: 100%;
background-color: grey;
}
.footer {
height: 2rem;
width: 100%;
background-color: yellow;
}
<body>
<div class="body">test as body</div>
<div class="footer">test as footer</div>
</body>
esto funciona al establecer la altura del pie de página y luego usar css calc para calcular la altura mínima que la página puede tener con el pie de página aún en la parte inferior, espero que esto ayude a algunas personas :)
Para mí, la mejor forma de mostrarlo (el pie de página) es pegarse a la parte inferior, pero sin cubrir el contenido todo el tiempo:
#my_footer {
position: static
fixed; bottom: 0
}
Para obtener un pie de página pegajoso:
Tenga un
<div>conclass="wrapper"para su contenido.Justo antes del cierre
</div>de lawrappercoloque el<div class="push"></div>.Justo después del cierre
</div>de lawrappercoloque el<div class="footer"></div>.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer''s height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
Puede usar la position: absolute seguimiento position: absolute para colocar el pie de página en la parte inferior de la página, pero luego asegúrese de que sus 2 columnas tengan el margin-bottom adecuado para que el pie de página no las oculte.
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
#content, #sidebar {
margin-bottom: 5em;
}
Un tema antiguo que conozco, pero si está buscando una solución receptiva, esta adición jQuery le ayudará:
$(window).on(''resize'',sticky);
$(document).bind("ready", function() {
sticky();
});
function sticky() {
var fh = $("footer").outerHeight();
$("#push").css({''height'': fh});
$("#wrapper").css({''margin-bottom'': -fh});
}
La guía completa se puede encontrar aquí: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/
Una solución sería establecer la altura mínima para las cajas. Desafortunadamente parece que no está bien soportado por IE (sorpresa).
Una solución similar a @gcedo pero sin la necesidad de agregar un contenido intermedio para empujar el pie de página hacia abajo. Simplemente podemos agregar margin-top:auto al pie de página y se enviará a la parte inferior de la página, independientemente de su altura o la altura del contenido anterior.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
.content {
padding: 50px;
background: red;
}
.footer {
margin-top: auto;
padding:10px;
background: green;
}
<div class="content">
some content here
</div>
<footer class="footer">
some content
</footer>
Use la posición absoluta y el índice z para crear una división de pie de página adhesivo en cualquier resolución mediante los siguientes pasos:
- Crear un pie de página div con
position: absolute; bottom: 0;position: absolute; bottom: 0;y la altura deseada - Establezca el relleno del pie de página para agregar espacios en blanco entre la parte inferior del contenido y la parte inferior de la ventana
- Cree un contenedor
divque envuelva el contenido del cuerpo conposition: relative; min-height: 100%;position: relative; min-height: 100%; - Agregue el relleno inferior al
divcontenido principal que es igual a la altura más el relleno del pie de página - Establezca el
z-indexdel pie de página mayor que eldivcontenedor si se recorta el pie de página
Aquí hay un ejemplo:
<!doctype html>
<html>
<head>
<title>Sticky Footer</title>
<meta charset="utf-8">
<style>
.wrapper { position: relative; min-height: 100%; }
.footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
.column { height: 2000px; padding-bottom: 300px; background-color: green; }
/* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */
</style>
</head>
<body>
<div class="wrapper">
<div class="column">
<span>hello</span>
</div>
<div class="footer">
<p>This is a test. This is only a test...</p>
</div>
</div>
</body>
</html>
Yo mismo he luchado con esto algunas veces y siempre encontré que la solución con todos esos divs entre sí era una solución desordenada. Simplemente lo jugué un poco, y personalmente descubrí que esto funciona y ciertamente es una de las formas más simples:
html {
position: relative;
}
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
Lo que me gusta de esto es que no es necesario aplicar HTML adicional. Simplemente puede agregar este CSS y luego escribir su HTML como cada vez que
jQuery CROSS BROWSER CUSTOM PLUGIN - $ .footerBottom ()
O use jQuery como lo hago yo, y establezca la altura de su pie de página en auto o para fix , lo que quiera, funcionará de todos modos. este complemento utiliza los selectores jQuery para que funcione, deberá incluir la biblioteca jQuery en su archivo.
Aquí es cómo ejecuta el plugin. Importe jQuery, copie el código de este complemento jQuery personalizado e impórtelo después de importar jQuery! Es muy sencillo y básico, pero importante.
Cuando lo hagas, todo lo que tienes que hacer es ejecutar este código:
$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer"
// by setting target to {target:"div.footer"}
No es necesario colocarlo dentro del evento preparado para documentos. Funcionará bien como está. Recalculará la posición de su pie de página cuando la página esté cargada y cuando la ventana cambie de tamaño.
Aquí está el código del complemento que no tienes que entender. Solo sé como implementarlo. Hace el trabajo por ti. Sin embargo, si desea saber cómo funciona, simplemente revise el código. Te dejé comentarios.
//import jQuery library before this script
// Import jQuery library before this script
// Our custom jQuery Plugin
(function($) {
$.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
var defaults = {
target: "footer",
container: "html",
innercontainer: "body",
css: {
footer: {
position: "absolute",
left: 0,
bottom: 0,
},
html: {
position: "relative",
minHeight: "100%"
}
}
};
options = $.extend(defaults, options);
// JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
$(options.target).css({
"position": options.css.footer.position,
"left": options.css.footer.left,
"bottom": options.css.footer.bottom,
});
$(options.container).css({
"position": options.css.html.position,
"min-height": options.css.html.minHeight,
});
function logic() {
var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
$(options.innercontainer).css(''padding-bottom'', footerOuterHeight + "px"); // Set padding equal to footer height on body element
$(options.target).css(''height'', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
};
// DEFINE WHEN TO RUN FUNCTION
$(window).on(''load resize'', function() { // Run on page loaded and on window resized
logic();
});
// RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
// return this.each(function() {
// this.checked = true;
// });
// return this;
};
})(jQuery); // End of plugin
// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5
/* Set your footer CSS to what ever you like it will work anyway */
footer {
box-sizing: border-box;
height: auto;
width: 100%;
padding: 30px 0;
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- The structure doesn''t matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
<div class="content">
<header>
<nav>
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</nav>
</header>
<section>
<p></p>
<p>Lorem ipsum...</p>
</section>
</div>
<footer>
<p>Copyright 2009 Your name</p>
<p>Copyright 2009 Your name</p>
<p>Copyright 2009 Your name</p>
</footer>