CSS: fijo en la parte inferior y centrado

Question

Necesito que mi pie de página se fije en la parte inferior de la página y que se centre. El contenido del pie de página puede cambiar en todo momento, así que no puedo centrarlo solo a través del margen izquierdo: xxpx; margen-derecha: 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 encontraron nada. Intenté hacer un contenedor div 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 éste;

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

Hay 2 posibles problemas que veo:

1 - IE ha tenido problemas con la posición: fijo en el pasado. Si está utilizando IE7 + con un doctype 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 centrar el objeto del pie de página. De lo contrario, el valor predeterminado es el ancho total 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, necesita para agregar "text-align: center" a su definición.

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 JS de piratear edad CSS.

http://jsfiddle.net/gLhEZ/

Answer 4

he encerrado el 'problema de otra div div' permite llamar a este div div encierran ... hacer el div encierran en css tener una anchura de 100% y Postion fijo con un fondo 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%;} 

entonces en html ...

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

¡Ya está!
- Hypertextie

Answer 5

revisado code by 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 6

Basado en el comentario de @ Michael:

Hay una forma mejor de hacerlo. 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. A continuación, solo haga una división de pie de página con absoluto e inferior: 0.

Fui excavación de la explicación y que se reduce a esto:

• Por defecto, la posición absoluta de la parte inferior: 0px lo establece en la parte inferior de la ventana ... no el fondo 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 colocar el cuerpo en posición relativa, la posición absoluta de abajo: 0px ahora refleja realmente la parte inferior de la página.

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

Answer 7

El problema radica en position: static. La estática significa que no debes hacer nada con la posición. position: absolute es lo que quieres. Sin embargo, centrar el elemento sigue siendo complicado. 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. Utilicé técnicas de centrado a partir de esta respuesta: How to center absolutely positioned element in div?

Answer 8

Aquí hay un ejemplo que utiliza la cuadrícula 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>

puede usar rejilla CSS: un ejemplo concreto