CSS: fijo al fondo y centrado

79

Necesito que mi pie de página se fije al final de la página y lo centre. El contenido del pie de página puede cambiar en todo momento, por lo que no puedo centrarlo a través de margin-left: xxpx; margen derecho: xxpx;

El problema es que por alguna razón esto no funciona:

#whatever {
  position: fixed;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

Busqué en la web y no encontré nada. Intenté hacer un contenedor div y nada. Probé otras combinaciones y gurnisht. ¿Cómo puedo hacer que esto suceda?

Gracias

css  positioning  sticky-footer 
— Camello camello camello
fuente
¿No está centrado? ¿O no está ubicado en la parte inferior de la página? ¿o ambos?
— brettkelly
No puedo hacer que uno suceda sin el otro. Si se escriben ambas reglas, se mantendrá al final pero también a la izquierda.
— CamelCamelCamel
4
Sé que esta es una publicación antigua. Pero hay una mejor manera de hacer esto. Simplemente cree el cuerpo con position:relativey paddingel tamaño del pie de página + el espacio entre el contenido y el pie de página que desee. Luego, solo crea un div de pie de página con absolutey bottom:0. Bum hace la dinamita.
— ThePrimeagen
Normalmente uso Compass para esto ahora.
— CamelCamelCamel
@Michael, tu comentario debería ser una respuesta. Ojalá lo hubiera visto antes.
— lmsurprenant

Respuestas:

52

Debería usar una solución de pie de página pegajosa como esta: 

* {
    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 */
}

Hay otros como este;

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}

con el html:

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>
— Marcgg
fuente
1
Eso no es cierto. Si usa posicionamiento fijo o absoluto, especificar solo una posición inferior adjuntará el elemento a la parte inferior. Sin embargo, hacer tal cosa significa que el elemento SIEMPRE está pegado al fondo, pase lo que pase. El pie de página adhesivo es la única forma de hacer que un pie de página se adhiera cuando el cuerpo es más corto que la ventana gráfica y se mueva hacia abajo cuando es más alto.
— jrista
44

código revisado por Daniel Kanis :

solo cambia las siguientes líneas en CSS

.problem {text-align:center}
.enclose {position:fixed;bottom:0px;width:100%;}

y en html:

<p class="enclose problem">
Your footer text here.
</p>
— masonería
fuente
abajo: 0 todo lo que necesitaba
— danday74
26

Una solución jQuery

$(function(){
    $(window).resize(function(){
        placeFooter();
    });
    placeFooter();
    // hide it before it's positioned
    $('#footer').css('display','inline');
});

function placeFooter() {    
    var windHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var offset = parseInt(windHeight) - parseInt(footerHeight);
    $('#footer').css('top',offset);
}

<div id='footer' style='position: fixed; display: none;'>I am a footer</div>

A veces es más fácil implementar JS que piratear CSS antiguo.

http://jsfiddle.net/gLhEZ/

— Thilo salvaje
fuente
6

El problema radica en position: static. Estático significa que no hagas nada con la posición. position: absolutees lo que quieres. Sin embargo, centrar el elemento sigue siendo complicado. Lo siguiente debería funcionar:

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 0px;
  right: 0px;
}

o

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 50%;
  transform: translate(-50%, 0);
}

Pero recomiendo el primer método. Utilicé técnicas de centrado de esta respuesta: ¿Cómo centrar un elemento absolutamente posicionado en div?

— AccidentalTaylorExpansion
fuente
3

Hay 2 problemas potenciales que veo:

1 - IE ha tenido problemas con la posición: arreglado en el pasado. Si está utilizando IE7 + con un tipo de documento válido o un navegador que no es IE, esto no es parte del problema

2 - Debe especificar un ancho para el pie de página si desea que el objeto de pie de página esté centrado. De lo contrario, el valor predeterminado es el ancho completo de la página y el margen automático para la izquierda y la derecha se establece en 0.Si desea que la barra de pie de página ocupe el ancho (como la barra de aviso de StackOverflow) y centre el texto, entonces necesita para agregar "text-align: center" a su definición.

— Rob Allen
fuente
3

He encerrado el 'problema div en otro div', llamemos a este div el div delimitado ... haga que el div delimitado en css tenga un ancho de 100% y la posición se haya arreglado con un fondo de 0 ... luego inserte el div del problema en el div adjunto así es como se vería

#problem {margin-right:auto;margin-left:auto; /*what ever other styles*/}
#enclose {position:fixed;bottom:0px;width:100%;}

luego en html ...

<div id="enclose">
    <div id="problem">
    <!--this is where the text/markup would go-->
    </div>
</div>

¡Ahí tienes!
- hipertexto

— Daniel Kanis
fuente
1

Basado en el comentario de @Michael:

Hay una mejor forma de hacer esto. Simplemente cree el cuerpo con la posición: relativa y un relleno del tamaño del pie de página + el espacio entre el contenido y el pie de página que desee. Luego solo crea un div de pie de página con un absoluto y un fondo: 0.

Fui a buscar la explicación y se reduce a esto:

  • De forma predeterminada, la posición absoluta de bottom: 0px lo establece en la parte inferior de la ventana ... no en la parte inferior de la página.
  • El posicionamiento relativo de un elemento restablece el alcance de la posición absoluta de sus hijos ... por lo que al configurar el cuerpo en el posicionamiento relativo, la posición absoluta de bottom: 0px ahora refleja realmente la parte inferior de la página.

Más detalles en http://css-tricks.com/absolute-positioning-inside-relative-positioning/

— lmsurprenant
fuente
0

aquí hay un ejemplo usando css grid.

html, body{
    height: 100%;
    width: 100%;
}
.container{
    height: 100%;
    display:grid;
    /*we divide the page into 3 parts*/
    grid-template-rows: 20px auto  30px;
    text-align: center;   /*this is to center the element*/ 
    
}

.container .footer{
    grid-row: 3;   /*the footer will occupy the last row*/
    display: inline-block;
    margin-top: -20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="header">

        </div>
        <div class="content">

        </div>
        <div class="footer">
            here is the footer
        </div>
    </div>
</body>
</html>
Expandir fragmento

puedes usar css grid: un ejemplo concreto

— Firas Omrane
fuente
0

Me encontré con un problema donde lo típico position: fixedy bottom: 0no funcionó. Descubrió una funcionalidad ordenada con position: sticky. Tenga en cuenta que es "relativamente" nuevo, por lo que no lo será con IE / Edge 15 y versiones anteriores.

Aquí hay un ejemplo de w3schools.

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: sticky;
  bottom: 0;
  background-color: yellow;
  padding: 30px;
  font-size: 20px;
}
</style>
</head>
<body>

<p>Lorem ipsum dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas </p>

<div class="sticky">I will stick to the screen when you reach my scroll position</div>

</body>
</html>
Expandir fragmento

— Joseph Cho
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.