¿Cómo puedo forzar que mi pie de página se adhiera a la parte inferior de cualquier página en CSS?

Question

Este es mi código:

#footer { 
    font-size: 10px; 
    position:absolute; 
    bottom:0; 
    background:#ffffff; 
} 

no tengo idea de lo que está mal con esto - ¿alguien puede ayudar?

EDITAR: Para obtener más claridad sobre lo que está mal: El pie de página se muestra en la parte inferior como se espera cuando se carga la página. Sin embargo, cuando la altura de la página web es> mayor que las dimensiones en la pantalla, de modo que aparece una barra de desplazamiento, el pie de página permanece en esa misma ubicación. Es decir, cuando el alto de la página es < = 100%, el pie de página está en la parte inferior. Sin embargo, cuando la altura de la página es> 100%, el pie de página NO está en la parte inferior de la página, sino en la parte inferior de la pantalla visible.

EDITAR: Sorprendentemente, ninguna de las siguientes soluciones funcionó. Terminé implementando una barra lateral en su lugar.

Answer 1

Probablemente se esté buscando this example:

<div class="wrapper"> 
    Your content here 
    <div class="push"></div> 
</div> 
<div class="footer"> 
    Your footer here 
</div> 

CSS:

Para un pie de página 142 píxeles

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

/* 

Sticky Footer by Ryan Fait 
http://ryanfait.com/ 

*/ 

Answer 2

la envoltura es el resto de la página. Los valores de margen/altura negativos/positivos son donde ocurre la magia.

.wrapper 
    { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; 
    } 
.footer, .push 
    { 
    height: 142px; /* .push must be the same height as .footer */ 
    } 

Answer 3

No utilizar la posición: absoluta; para cualquier pie de página ya que la página cambiará de altura. Si es absoluta, su pie de página no se moverá con la altura de la página.

Quiere utilizar el método de ryan fait.

Aunque personalmente lo haría así;

.wrap {margin: auto; width: 980px;} 
#content {min-height: 600px;} 
#footer {height: 300px;} 

<div class="wrap"> 
<div id="content"> 
</div> 
</div> 
<div id="footer"> 
<div class="wrap"> 
</div> 
</div> 

De esta manera no tiene que perder el tiempo con los márgenes negativos y el relleno. También esto puede ser fácilmente una parte de HTML5 cambiar #footer a

<footer> 
</footer> 

Answer 4

#footer { clear:both; position:fixed; width:100%; height:50px; bottom:0; background:black;} 

Answer 5

Prueba esto:

position: fixed; 
bottom: 0; 

Answer 6

Por qué no con jQuery?

Coloque un divisor de envoltura entre el encabezado y el pie de página y asigne una propiedad de altura mínima para el envoltorio con jquery igual a la diferencia entre la altura del documento y (altura del encabezado + altura del pie de página).

<script type="text/javascript"> 
$(document).ready(function(){ 
var dh = $(document).height(); //document height here 
var hh = $('header').height(); //header height 
var fh = $('footer').height(); //footer height 
var wh = Number(dh - hh - fh); //this is the height for the wrapper 
$('#wrapper').css('min-height', wh); //set the height for the wrapper div 
}); 
</script> 

Answer 7

Esto es lo que hice y causó que mi pie de página se quedara en la parte inferior.

.footer2{ 
background-color:#606060 ; 
color: #ffffff; 
height: 30px; 
bottom:0px; 
position:fixed; 
width:100%; 
} 

Answer 8

.footer-small, .push { 
    background-color: #2C3E50; 
    position: fixed; 
    padding-top: 5px; 
    clear:both; 
    width: 100%; 
    bottom:0px; 
    z-index: 0; 
} 

esto también está trabajando para mí ....

Answer 9

me costó encontrar una solución, ya que ninguno de los sugirió conseguido lo que quería:

• Si hay al menos contenido, permanezca en la parte inferior de la página, no en el medio.
• Si hay suficiente contenido, no se adhiera y superponga el contenido, simplemente permanezca en la parte inferior.
• Esconderlo desde la primera vista, por lo que solo si el usuario se desplaza hacia abajo se ve el pie de página.

Esto es lo que funcionó para mí:

html:

<body> 
    <div class="page-wrapper"> 
    <h1> 
     Page 
    </h1> 
    </div> 
    <footer> 
    Footer here 
    </footer> 
</body> 

css:

body { 
    height: 100%; 
    width: 100%; 
} 

.page-wrapper { 
    min-height:100vh; /*1vh = 1% of browser screen height*/ 
} 

footer{ 
    position: relative; 
    width: 100%; 
    bottom: 0px; 
} 

Here en acción.

Answer 10

que tenían la misma pregunta, vinieron aquí en busca de una respuesta, no lo encontró, y luego trató algunos experimentos por mi cuenta y finalmente obtuvo la solución:

#body { 
 
    overflow-y: 0 auto; 
 
} 
 
#footer { 
 
    color: #fff; 
 
    background-color: rgba(0,0,0,0.6); 
 
    position: fixed; 
 
    padding: 10px; 
 
    top: 100vh; 
 
    margin-top: -100px; 
 
    width: 100%; height: 100px; 
 
}

<div id="body"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
 
</div> 
 
<div id="footer"> 
 
    <span>Some dummy Text</span> 
 
</div>