4

quiero que el footer me quede siempre al final de toda la pagina no importando el contenido, cuando pongo este codigo :

.footer{
    position: relative;
    left: 0;
    bottom: 0;  
    display: table;
    width: 100%;
    height: 13vh;
    background-color: #000;
    color:#fff;
    text-align: center;
}

el footer me queda al final pero solo en las paginas donde tienen contenido, si hay una pagina que no tenga contenido el footer me queda arriba.

y cuando uso este código el footer en las paginas sin contenido me queda al final pero en las que tengan contenido me queda al final de la pantalla pero no de la página:

.footer{
    position: absolute;
    left: 0;
    bottom: 0;  
    display: table;
    width: 100%;
    height: 13vh;
    background-color: #000;
    color:#fff;
    text-align: center;
}

4 respuestas 4

2

Para tener el comportamiento de footer siempre al fondo de la pagina, debes tener el body con min-height de 100% del viewport y podes usar un truco como el de ponerlo el flex y auto margin-top para que siempre este en el fondo.

body{
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.footer {
  margin-top: auto;
  display: table;
  width: 100%;
  height: 13vh;
  background-color: #000;
  color:#fff;
  text-align: center;

}
<body>
    <div class="contenido">
        este es mi contenido
    </div>
    <footer class="footer"> 
      Este es mi footer
    </footer>
<body>

0
0

Creo que lo que necesitas es un pie de pagina fijo.

<style>
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
   background-color: #000;
    color:#fff;
  text-align: center;
}
</style>

<div class="footer">
  <p>Footer</p>
</div>
1
  • con esta opción me queda fijo lo que yo quiero es que me aparezca al final de todo el contenido Commented el 27 sept. 2021 a las 4:50
0

Para tener un footer fijo, prueba esté codigo e implementalo a el tuyo

<style>
.customFooter {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #000;
    color:#fff;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
}
</style>

<div class="customFooter">
  <p>This is a Custom Footer</p>
</div>
1
  • ¿Cual fue la falla del OP? ¿Qué parte del código es la que produce el efecto deseado?
    – Candid Moe
    Commented el 27 sept. 2021 a las 8:17
0

Lo puedes hacer dando al body un position relative y un min-height de 100vh, es este caso siempre medirá como minimo la pantalla y se adaptará si el contenido es mayor.

Luego posicionaras tu footer con position absolute bottom 0 para que siempre queda en la parte baja del body.

body {
    position: relative;
    min-height: 100vh;
}
    
.footer {
    position: absolute;
    bottom: 0;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.