for - CSS: fijado a la parte inferior y centrado

style for title

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 encontré nada. Intenté hacer un contenedor div y nada. Probé otras combinaciones y gurnisht. ¿Cómo puedo hacer que esto suceda?

Gracias

Answer 1

Basado en el comentario de @Michael:

Hay una mejor manera 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 pie de página div con un valor absoluto e inferior: 0.

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

• De forma predeterminada, la posición absoluta de la parte inferior: 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 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 2

Debe usar una solución de pie de página adhesiva 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>

Answer 3

El problema radica en la 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. 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 a partir de esta respuesta: ¿Cómo centrar el elemento absolutamente posicionado en div?

Answer 4

Hay 2 posibles problemas que veo:

1 - IE ha tenido problemas con la posición: arreglado 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 que el objeto del pie de página se centre. 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 ) y centre el texto, necesita para agregar "text-align: center" a su definición.

Answer 5

He encerrado el ''problema div en otro div'' vamos a llamar a este div el encierre div ... haz que el enclosure div en css tenga un ancho del 100% y la posición se fije con un mínimo de 0 ... luego inserta el problema div en el encerrar div 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!
- Hipertextual

Answer 6

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 antiguos.

http://jsfiddle.net/gLhEZ/

Answer 7

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>

puedes usar la rejilla css: un ejemplo concreto

Answer 8

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>