pie - alinear texto abajo html



¿Cómo alinear el pie de página(div) en la parte inferior de la página? (5)

Esta pregunta ya tiene una respuesta aquí:

¿Alguien puede explicar cómo alinear un pie de página div en 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 hayas desplazado la página. Aunque no lo quiero así. Lo quiero arreglado en la parte inferior de la página, por lo que no se mueve. ¡Aprecia la ayuda!

https://ffff65535.com


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 te desplaces 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 superior deben ser iguales para que el pie de página no se muestre sobre el contenido.


Soy un novato y estos métodos no me funcionan. Sin embargo, probé una propiedad de margen superior en css y simplemente agregué el valor de los píxeles de contenido +5.

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

Probablemente una forma amateur de hacerlo, ¡pero EFECTIVA!


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


mira esto, funciona en Firefox y 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>

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

Proporcione min-height: 100% en html, de modo que si el contenido es menor, la página estática toma toda la altura del puerto de visualización y el pie de página 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 pegado al fondo.

Demostración de JS violín trabajando: 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>




alignment