Cómo arreglar un pie de página en la parte inferior de la página

En mi html tengo un “pie de página” div clasificado. Quiero que tenga un bg a # 000 y ocupe todo el ancho de la página y no quede espacio en blanco después.

Actualmente estoy usando este CSS:

.footer { color: #fff; clear: both; margin: 0em 0em 0em 0em; padding: 0.75em 0.75em; background: #000; position: relative; top: 490px; border-top: 1px solid #000; } 

Pero el ancho de la página completa no está lleno con este código CSS.

¿Alguna ayuda? ¡Gracias!

Uso el pie de página adhesivo: http://ryanfait.com/sticky-footer/

 /* Sticky Footer by Ryan Fait http://ryanfait.com/ */ * { 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 */ } 
 
body goes here

podrías hacer que el pie de página div sea absolutamente igual a la página así:

 .footer { position:absolute; bottom:0px; width: 100%; margin: 0; background-color: #000; height: 100px;/* or however high you would like */ } 

Uso algunos elementos DIV para cada sección de mis páginas web.

 
...
...
...

Cada sección está relativamente posicionada. Utilizando DIV ‘s de envoltura, puedo configurar el envoltorio con un ancho específico y los elementos dentro de él pueden tener 100% ancho del 100% .

Sugiero que evite el posicionamiento absoluto y la flotación, ya que crean problemas de compatibilidad, por lo que pueden no aparecer correctamente en todos los navegadores.

si desea que su pie de página se fije en su página:

 .footer{ position:fixed;} 

pero si quiere que su pie de página esté fijo al final de la página:

mira eso

Me alegro por el apoyo que brindaron, cada una de estas respuestas me ayudó de alguna manera. Llegué a este código:

 .footer { height: 59px; margin: 0 auto; color: #fff; clear: both; padding: 2em 2em; background: #000; position: relative; top: 508px; } 

¡Gracias!

Este problema me vino cuando comencé una aplicación web usando el menú de Bootstrap y el pie de página fijo independientemente de la resolución del navegador.

Use el estilo a continuación para el elemento de pie de página

Estilo en línea

Hoja de estilo externa utilizando el atributo de clase en Div

   

style.css

  .footer { backgroud-color:black; position:fixed; bottom:0; height:2%; } 

Hoja de estilo externa que usa el atributo id en Div

  

style.css

  #divfooter { backgroud-color:black; position:fixed; bottom:0; height:2%; } 

Puede usar estos estilos en su CSS para lograr su objective

 .footer{ background-color: #000; min-width: 100%; height: 100px; bottom:0; position: fixed; } 

Si está utilizando el arranque, intente con margin-left: -15px y margin-right: -15px pero no será necesario en la mayoría de los casos cuando tenga su propia clase.

html:

  

css:

 .footer { width: 100%; height: auto; text-align: center; background: rgb(59, 67, 79); position: fixed; bottom: 0%; margin-top: 50%; } * { padding: 0; margin: 0; }