Cómo alinear el pie de página (div) a la parte inferior de la página? [duplicar]

Esta pregunta ya tiene una respuesta aquí:

Puede alguien explicar cómo alinear un div de pie de página a la parte inferior de la página. De los ejemplos que he visto, todos muestran cómo hacer que el div permanezca visible en la parte inferior, sin importar dónde haya desplazado la página. Aunque yo no lo quiero así. Lo quiero fijo en la parte inferior de la página, para que no se mueva. Agradezco la ayuda!

Author: Joey Morani, 2010-08-19
Source

7 answers

ACTUALIZACIÓN

Mi respuesta original es de hace mucho tiempo, y los enlaces están rotos; actualizándola para que siga siendo útil.

Estoy incluyendo soluciones actualizadas en línea, así como ejemplos de trabajo en JSFiddle. Nota: Estoy confiando en un reset CSS, aunque no estoy incluyendo esos estilos en línea. Refiérase a normalizar.css

Solución 1-margen desplazamiento

Https://jsfiddle.net/UnsungHero97/ur20fndv/2 /

HTML

<div id="wrapper">
  <div id="content">
    <h1>Hello, World!</h1>
  </div>
</div>
<footer id="footer">
  <div id="footer-content">Sticky Footer</div>
</footer>

CSS

html, body {
  margin: 0px;
  padding: 0px;
  min-height: 100%;
  height: 100%;
}

#wrapper {
  background-color: #e3f2fd;
  min-height: 100%;
  height: auto !important;
  margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */
}

#wrapper:after {
  content: "";
  display: block;
  height: 50px; /* the footer's total height */
}

#content {
  height: 100%;
}

#footer {
  height: 50px; /* the footer's total height */
}

#footer-content {
  background-color: #f3e5f5;
  border: 1px solid #ab47bc;
  height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
  padding: 8px;
}

Solución 2-flexbox

Https://jsfiddle.net/UnsungHero97/oqom5e5m/3 /

HTML

<div id="content">
  <h1>Hello, World!</h1>
</div>
<footer id="footer">Sticky Footer</footer>

CSS

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#content {
  background-color: #e3f2fd;
  flex: 1;
  padding: 20px;
}

#footer {
  background-color: #f3e5f5;
  padding: 20px;
}

Aquí hay algunos enlaces con explicaciones más detalladas y diferentes enfoques:

RESPUESTA ORIGINAL

¿Es esto lo que quieres decir?

Http://ryanfait.com/sticky-footer /

Este método utiliza solo 15 líneas de CSS y casi ningún marcado HTML. Aún mejor, es CSS completamente válido, y funciona en todos los principales navegadores. Internet Explorer 5 y superiores, Firefox, Safari, Opera y más.

Este pie de página permanecerá en la parte inferior de la página permanentemente. Esto significa que si el contenido es mayor que la altura de la ventana del navegador, tendrá que desplazarse hacia abajo para ver el pie de página... pero si el contenido es menor que la altura de la ventana del navegador, el pie de página se pegará a la parte inferior de la ventana del navegador en lugar de flotar en el medio de la página.

Avísame si necesitas ayuda con la implementación. Espero que esto ayude.

 84
Author: Hristo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-06 16:51:47

Esto hará que el div se fije en la parte inferior de la página, pero en caso de que la página sea larga, solo será visible cuando se desplace hacia abajo.

<style type="text/css">
  #footer {
    position : absolute;
    bottom : 0;
    height : 40px;
    margin-top : 40px;
  }
</style>
<div id="footer">I am footer</div>

La altura y el margen-top deben ser los mismos para que el pie de página no se muestre sobre el contenido.

 37
Author: ovais.tariq,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-08-19 19:44:26

Tu título y comentarios implican que no estabas buscando un pie de página pegajoso (pegado en la parte inferior de la ventana mientras el contenido se desplaza debajo de él). Asumo que estaba buscando un pie de página que se vería forzado a la parte inferior de la ventana si el contenido no llena la ventana, y presione hacia abajo hasta la parte inferior del contenido si el contenido excede el límite de la ventana.

Puede lograr esto con lo siguiente.

&ltstyle>
html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
}
#header {
    background:#ff0;
    padding:10px;
}
#body {
    padding:10px;
    padding-bottom:60px;   /* Height of the footer */
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
}
&lt/style>

&ltdiv id="container">
    &ltdiv id="header">header&lt/div>
    &ltdiv id="body">body&lt/div>
    &ltdiv id="footer">footer&lt/div>
&lt/div>

Fuente: Cómo mantener los pies de página en la parte inferior page

 19
Author: Jason George,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-07 06:07:35

Mira esto, funciona en firefox e IE

<style>
    html, body
    {
        height: 100%;
    }
    .content
    {
        min-height: 100%;
    }
    .footer
    {
        position: relative;
        clear: both;
    }
</style>

<body>
<div class="content">Page content
</div>
<div class="footer">this is my footer
</div>
</body>
 7
Author: Vinay B R,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-08-19 20:19:29

Use <div style="position:fixed;bottom:0;height:auto;margin-top:40px;width:100%;text-align:center">I am footer</div>. El pie de página no irá hacia arriba

 6
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-08 11:16:36

Una solución simple que uso, funciona desde IE8 +

Dar min-height:100% en html de modo que si el contenido es menor que todavía página toma altura de puerto de vista completa y pie de página se pega en la parte inferior de la página. Cuando el contenido aumenta, el pie de página se desplaza hacia abajo con el contenido y sigue pegándose a la parte inferior.

JS fiddle demostración de trabajo: http://jsfiddle.net/3L3h64qo/2 /

Css 

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html 

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>
 3
Author: Sanjeev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-19 07:12:26

Soy un novato y estos métodos no funcionan para mí. Sin embargo, probé una propiedad margin-top en css y simplemente agregué el valor de content pixels +5.

Ejemplo: mi diseño de contenido tenía una altura de 1000px, así que puse un valor de margen superior de 1005px en el css del pie de página, lo que me dio un borde de 5px y un pie de página que se encuentra deliciosamente en la parte inferior de mi sitio.

Probablemente una forma amateur de hacerlo, pero EFICAZ!!!

 1
Author: Jamie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-05-18 10:11:45