¿Cómo conseguir que el pie permanezca en la parte inferior de una página Web?
https://stackoverflow.com/questions/42294
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Tengo una simple 2-diseño de la columna con un pie de página que borra la derecha y a la izquierda div en mi marcado.Mi problema es que no puedo obtener el pie de página para permanecer en la parte inferior de la página en todos los navegadores.Funciona si el contenido empuja el pie hacia abajo, pero eso no es siempre el caso.
Actualización:
No funciona correctamente en Firefox.Estoy viendo una tira de color de fondo por debajo de la de pie de página cuando no hay suficiente contenido en la página para empujar el pie de página de todo el camino hacia abajo a la parte inferior de la ventana del navegador.Por desgracia, este es el estado por defecto de la página.
Solución
Para obtener una pegajosa pie de página:
Tiene un
<div>conclass="wrapper"para su contenido.Derecho antes de el cierre
</div>de lawrappercoloque el<div class="push"></div>.Derecho después de el 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 */
}
Otros consejos
El uso de CSS vh unidades!
Probablemente la más obvia y no hacky manera de ir sobre una bomba de pie de página sería hacer uso de la nueva css ventanilla unidades.
Tomemos por ejemplo el siguiente formato:
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>
Si el encabezado es decir 80px alta y el pie de página es 40px alta, entonces podemos hacer que nuestros pegajosa pie de página con una única regla en el div de contenido:
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
}
Lo que significa:vamos a la altura del div de contenido se al menos El 100% de la ventanilla altura menos la combinación de las alturas de la cabecera y pie de página.
Eso es todo.
* {
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 he aquí cómo el mismo código funciona con una gran cantidad de contenido en el div 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>NB:
1) La altura de la cabecera y el pie de página debe ser conocido
2) las versiones Antiguas de IE (internet explorer 8-) y Android (4.4-) no admiten la ventanilla unidades.(caniuse)
3) una vez que la webkit tenido un problema con el viewport de las unidades dentro de un calc regla.Este hecho ha sido corregido (ver aquí) así que no hay problema.Sin embargo, si usted está buscando para evitar el uso de calc, por alguna razón, usted puede conseguir alrededor de que el uso de márgenes negativos y relleno con box-sizing -
Así:
* {
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>Pegajoso pie de página con display: flex
Solución inspirada por Felipe Walton pegajosas de pie de página.
Explicación
Esta solución es válido sólo para:
- Chrome ≥ 21.0
- Firefox ≥ 20.0
- Internet Explorer ≥ 10
- Safari ≥ 6.1
Se basa en la flex pantalla, aprovechando las flex-grow la propiedad, que permite que un elemento crecer en cualquiera de los dos altura o ancho (cuando el flow-direction se establece column o row respectivamente), para ocupar el espacio extra en el contenedor.
Vamos a aprovechar también la vh de la unidad, donde 1vh es se define como:
1/100th de la altura de la ventanilla
Por lo tanto, una altura de 100vh es una manera concisa de decirle a un elemento que cubren la totalidad de la ventanilla de la altura.
Esta es la manera de la estructura de su página web:
----------- body -----------
----------------------------
---------- footer ----------
----------------------------
Con el fin de tener el pie de página se adhieren a la parte inferior de la página, usted desea que el espacio entre el cuerpo y el pie de página para crecer tanto como se requiere 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 ----------
----------------------------
La aplicació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 ella en el JSFiddle.
Safari peculiaridades
Ser conscientes de que Safari tiene una errónea aplicación de la flex-shrink la propiedad, que permite que los artículos reducir más de la altura mínima que sería necesario para mostrar el contenido.Para solucionar este problema tendrá que establecer la flex-shrink propiedad explícitamente a 0 a la .content y el footer en el ejemplo de arriba:
.content { flex-shrink: 0; }
.footer { flex-shrink: 0; }
Usted podría utilizar position: absolute tras poner el pie de página en la parte inferior de la página, pero, a continuación, asegúrese de que su 2 columnas tienen el adecuado margin-bottom de modo que nunca te ocluido por el pie de página.
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
#content, #sidebar {
margin-bottom: 5em;
}
Aquí es 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í, entonces 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 el pie de página ya tiene un margin-top (de 50 píxeles, por ejemplo), usted tendrá que cambiar la última parte de:
css( 'margin-top', height_diff + 50 )
Establecer el CSS para el #footer a:
position: absolute;
bottom: 0;
A continuación, se necesita agregar un padding o margin a la parte inferior de su #sidebar y #content para que coincida con la altura de #footer o cuando se superponen, el #footer los cubra.
También, si no recuerdo mal, IE6 tiene un problema con la bottom: 0 CSS.Usted podría tener que utilizar un JS solución para IE6 (si usted se preocupa por IE6 que es).
Una solución similar a @gcedo pero sin la necesidad de añadir un intermedio de contenido con el fin de empujar el pie hacia abajo.Simplemente podemos añadir margin-top:auto para el pie de página y que será empujado a la parte inferior de la página, independientemente de su altura o la altura de los contenidos citados.
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>El uso de posicionamiento absoluto y z-index para crear un pegajoso pie de página div en cualquier resolución mediante los pasos siguientes:
- Crear un pie de página con div
position: absolute; bottom: 0;y a la altura deseada - Establecer el relleno de la pie de página para agregar espacio en blanco entre el contenido de la parte inferior y la parte inferior de la ventana
- Crear un contenedor
divque se envuelve el cuerpo con contenidoposition: relative; min-height: 100%; - Agregar fondo de relleno para el contenido principal
divque es igual a la altura más el relleno de la pie de página - Establecer el
z-indexdel pie de página mayor que el contenedordivsi el pie de página se recorta
He aquí 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>Trate de poner un div contenedor (con overflow:auto) de todo el contenido y la barra lateral.
Si eso no funciona, ¿tienes alguna captura de pantalla o enlaces de ejemplo donde el pie de página no se visualiza correctamente?
Una solución podría ser establecer el min-altura de las cajas.Por desgracia parece que no está bien apoyado por el IE (sorpresa).
Ninguno de estos pure css soluciones funcionan correctamente con cambio de tamaño de forma dinámica el contenido (al menos en firefox y Safari), por ejemplo, si usted tiene un fondo establecido en el div contenedor, la página y, a continuación, cambiar el tamaño (la adición de un par de filas) de la tabla dentro del div, la tabla puede sobresalir de la parte inferior del estilo de la zona, es decir, usted puede tener la mitad de la tabla en blanco sobre negro el tema y la mitad de la tabla completa en blanco debido a que tanto el color de fuente y color de fondo es blanco.Es, básicamente, que no se puede reparar con themeroller páginas.
Anidado div multi-diseño de la columna es un feo hack y el 100% min-altura cuerpo/div contenedor para que se pegue el pie de página es un feo corte.
La única ninguno-solución de script que funciona en todos los navegadores que he probado:mucho más fácil/más corto de la tabla con thead (de cabecera)/tfoot (de pie)/tbody (td para cualquier número de columnas) y el 100% de la altura.Pero esto ha percibido semántica y SEO desventajas (tfoot debe aparecer antes de tbody.ARIA roles puede ayudar decente motores de búsqueda, aunque).
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 debe hacer el truco si usted está buscando para una capacidad de respuesta de pie de página alineado en la parte inferior de la página,que siempre mantiene una parte superior con un margen del 80% de la ventanilla de altura.
Para esta pregunta muchas de las respuestas que he visto son torpe, difícil de poner en práctica e ineficientes, así que pensé en tomar una foto y vienen hasta con mi propia solución, que es sólo un poco 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 mediante el ajuste de la altura del pie de página y, a continuación, mediante el uso de css calc para calcular la altura mínima de la página puede ser con el pie todavía en el fondo, espero que esto ayuda a algunas personas :)
Yo mismo he luchado con esto, a veces, y siempre me pareció que la solución con todos los div dentro de cada uno de los otros era un desordenado solución.Acabo metido un poco con ella, y yo he encontrado que esto funciona y que sin duda es una de las formas más sencillas:
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 ninguna de HTML debe ser aplicado.Usted puede simplemente añadir CSS y, a continuación, escribir el código HTML como siempre
Varias personas han puesto la respuesta a esta simple problema aquí, pero yo tengo una cosa que añadir, teniendo en cuenta lo frustrado que estaba hasta que me di cuenta de lo que estaba haciendo mal.
Como se mencionó la forma más sencilla de hacer esto 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 no se menciona en los puestos, presumiblemente porque es generalmente de forma predeterminada, es el posición:estática en el cuerpo de la etiqueta.Posición en relación no va a funcionar!
Mi tema de wordpress había reemplazado el cuerpo predeterminado de la pantalla y se me confunde para un desagradable largo tiempo.
Un viejo hilo sé, pero si usted está buscando para una capacidad de respuesta de la solución, este jQuery, además ayudará a:
$(window).on('resize',sticky);
$(document).bind("ready", function() {
sticky();
});
function sticky() {
var fh = $("footer").outerHeight();
$("#push").css({'height': fh});
$("#wrapper").css({'margin-bottom': -fh});
}
Guía completa se puede encontrar aquí: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/
He creado una muy simple biblioteca https://github.com/ravinderpayal/FooterJS
Es muy fácil 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"));
Pies de página pueden cambiar dinámicamente recordando función anterior con diferente parámetro/id.
footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));
Nota:- no ha de alterar o añadir CSS.La biblioteca es dinámico, lo que implica que incluso si la pantalla es de tamaño después de la carga de la página va a restablecer la posición de pie de página.He creado esta biblioteca, porque CSS resuelve el problema por un tiempo, pero cuando el tamaño de la pantalla cambia de forma significativa,desde el escritorio a la tablet o viceversa, que o bien se solapan con el contenido o la que ya no queda pegajoso.
Otra solución es Consultas de Medios CSS, pero usted tiene que escribir manualmente los diferentes estilos CSS para diferentes tamaños de pantallas, mientras que esta biblioteca hace su trabajo de forma automática y es compatible con todos los conceptos básicos de JavaScript apoyo de navegador.
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 la pantalla es mayor que su longitud de contenido, vamos a hacer que el pie de página fija a la parte inferior y si no, aparecerá automáticamente en la final de la pantalla como usted necesita desplazarse para ver esto.
Y, parece una mejor solución que JavaScript/biblioteca de uno.
Yo no estaba teniendo suerte con las soluciones propuestas en esta página antes de pero, finalmente, este pequeño truco funcionó.Voy a incluir como otra posible solución.
footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
Flexbox solución
Flex diseño es preferido por los recursos naturales de encabezado y pie de página a las alturas.Esta flexibilidad de la solución se ha probado en los navegadores modernos y realmente 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;
}
Para mí la mejor manera de mostrar (el pie de página) se adhiere a la parte inferior, pero no abarca el contenido de todo el tiempo:
#my_footer {
position: static
fixed; bottom: 0
}
jQuery CROSS BROWSER PLUGIN PERSONALIZADO - $.footerBottom()
O el uso de jQuery, al igual que yo, y establecer el pie de la altura a auto o a fix, lo que usted quiera, va a funcionar de todos modos.este plugin utiliza los selectores de jQuery para hacer que funcione, tendrá que incluir la librería jQuery para su archivo.
Aquí está la forma de ejecutar el plugin.Importación de jQuery, copia el código de esta costumbre plugin de jQuery y de importación después de la importación de jQuery!Es muy sencillo y básico, pero importante.
Cuando lo haces, 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 hay necesidad de colocarlo dentro del documento listo evento.Va a correr bien como está.Se volverá a calcular la posición de su pie de página cuando se carga la página y cuando la ventana cambia de tamaño.
Aquí está el código del plugin que usted no tiene que entender.Sólo sé cómo ponerlo en práctica.Hace el trabajo por usted.Sin embargo, si quieres saber cómo funciona, basta con mirar a través del código.He dejado comentarios para usted.
//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>El flex soluciones trabajado para mí tan lejos como para hacer que el pie de página pegajoso, pero por desgracia cambio del cuerpo para utilizar flex diseño hecho algunos de nuestros diseños de página cambio, y no para mejor.Lo que finalmente se trabajó para mí fue:
jQuery(document).ready(function() {
var fht = jQuery('footer').outerHeight(true);
jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");
});
Tengo este desde ctf0 la respuesta en https://css-tricks.com/couple-takes-sticky-footer/
Desde el Cuadrícula la solución no ha sido presentado todavía, aquí está, con solo dos declaraciones para el elemento padre, si nos tomamos en el height: 100% y margin: 0 por descontado:
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 elementos se distribuyen uniformemente dentro de la alineación de contenedor a lo largo de la cruz del eje.El espaciado entre cada par de elementos adyacentes es el mismo.El primer elemento está alineado con el principal-inicio de borde, y la última elemento esté a ras con el principal fin de borde.
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
border: 3px solid #73AD21;
} <body style="height:1500px">
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>