CSS: fija a la parte inferior y centrado

Question

Necesito mi pie de página para ser fijada a la parte inferior de la página y para centrarlo. El contenido del pie de página pueden cambiar en todo momento, así que no puedo acaba de centrarlo través margin-left: xxpx; margin-right: xxpx;

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

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

Me arrastré por la web y no encontré nada. He intentado hacer un div contenedor y nada. Probé otras combinaciones y gurnisht. ¿Cómo puedo hacer que esto suceda?

Gracias

Answer 1

Se debe utilizar una solución pie de página pegajoso como este:

* {
    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 esto;

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

Answer 2

por Daniel Kanis :

acaba de cambiar 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>

Answer 3

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 de implementar que JS hackear edad CSS.

http://jsfiddle.net/gLhEZ/

Answer 4

El problema radica en position: static. medios estáticos no hacen anyting en absoluto con la posición. position: absolute es lo que quiere. Centrar el elemento es todavía difícil sin embargo. El 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. Me utilizado técnicas de esta respuesta de centrado: Cómo centrar elemento absolutamente posicionado en div?

Answer 5

Hay 2 posibles problemas que veo:

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

2 - Es necesario especificar un ancho para el pie de página si desea que el objeto pie de página para estar centrado. De lo contrario, por defecto en todo el ancho de la página y el margen de automóviles para la izquierda y la derecha consiga el sistema a 0. Si desea que la barra inferior para ocupar el ancho (como la barra de notificación stackoverflow) y centrar el texto, entonces usted necesita añadir "text-align: center" a su definición.

Answer 6

He encerrado el 'problema de otra div div' Deja llamada este div div encierran ... hacer que el div encierran en CSS tiene una anchura de 100% y Postion fijo con una parte inferior de 0 ... a continuación, insertar el div problema en el div encierran esto es cómo se vería

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

A continuación, en html ...

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

Hay ya go!
- Hypertextie

Answer 7

Con base en el comentario de @ Michael:

  

Hay una mejor manera de hacer esto. Basta con crear el cuerpo con   posición: relativa y un acolchado del tamaño del pie de página + el espacio   entre el contenido y el pie de página que desee. A continuación, sólo hacer un pie de página con div   una parte inferior absoluto y:. 0

Me fui de excavación para la explicación y se reduce a lo siguiente:

• Por defecto, la posición absoluta de la parte inferior: 0px lo establece en la parte inferior de la ventana ... no es el final de la página
.
• El posicionamiento relativo de un elemento restablece el alcance de la posición absoluta de sus hijos ... así fijando el cuerpo de posicionamiento relativo, la posición absoluta de la parte inferior: 0px ahora realmente refleja la parte inferior de la página
.

Más detalles en http://css-tricks.com/absolute- posicionamiento-dentro-relativo posicionamiento /

Answer 8

Aquí está un ejemplo utilizando rejilla css.

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>

se puede usar rejilla CSS: un ejemplo concreto