20

Buenas tardes gente!. He buscado por media hora y no encontré nada que me sirva o me de resultados positivos. Tengo una tabla dinámica que cambia la cantidad de filas a mostrar según lo que uno seleccione del DropDownList. El problema es que para aquellos casos en que la tabla tiene pocas filas, el footer se sale de su lugar y como ven a continuación no queda "pegado" bien al pie de pagina.

introducir la descripción de la imagen aquí

He probado con el atributo position, con otros de los cuales nunca había oído pero no logro que el footer quede siempre pegado al pie. De momento esto es lo que tengo en mi css;

footer
{
    margin-top:50px;
    width:100%;
    height:200px;
    background-color:red;
}

Desde ya muchas gracias!

0

9 respuestas 9

37

Podrías "empujar" el footer hacia abajo de manera tal que cuando la tabla sea muy grande este no la cubra sin embargo cuando sea muy pequeña el footer se quede al final.

Te dejo un ejemplo

Nota: Corre el snippet a pantalla completa para que veas mejor el resultado.

html {
  min-height: 100%;
  position: relative;
}
body {
  margin: 0;
  margin-bottom: 40px;
}
footer {
  background-color: black;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  color: white;
}
<table>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
</table>
<footer>
  Footer
</footer>

Si la tabla es muy grande el footer se ajusta al alto de la página en lugar de cubrirla.

html {
  min-height: 100%;
  position: relative;
}
body {
  margin: 0;
  margin-bottom: 40px;
}
footer {
  background-color: black;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  color: white;
}
<table>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
  </tr>
</table>
<footer>
  Footer
</footer>

7
  • 2
    Me sirvio! Muchas gracias!
    – Lucas. D
    Commented el 23 may. 2016 a las 21:26
  • 2
    @LucasDavid No te olvides de marcar la respuesta como aceptada si te sirvió. Esto te da reputación y ayuda a que los demás a entender que la respuesta te fue útil.
    – devconcept
    Commented el 19 jul. 2016 a las 15:48
  • lo más modeno es flexbox Commented el 15 nov. 2019 a las 16:56
  • @Franklin'jGil'z Te equivocas. Lo más moderno es grid. Si miras los estilos estos tienen que ver con la etiqueta html, el body y el tamaño del viewport. El código es bastante sencillo, no veo de que forma flexbox podría simplificar esa tarea.
    – devconcept
    Commented el 15 nov. 2019 a las 17:10
  • 1
    Excelente, estuve buscando esta información, se agradece tu aporte.
    – GianMarco
    Commented el 21 nov. 2019 a las 14:20
11

Deberías establecer el position como fixed y el left y el bottom a 0 para que quede fijado abajo a la izquierda en la página:

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}
<div>
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.
</div>

<div id="footer">Pie de página</div>

1
  • 1
    Gracias Asier! El problema es que con la posición fixed, (lo cual use en mis intentos de lograr lo que quiero) me posiciona el footer al final de lo que mi pantalla capta. Yo simplemente necesito que quede al final de la pagina. Empiezo a sospechar que quizás tengo algún error o atributo que me impide lograr lo que necesito.
    – Lucas. D
    Commented el 23 may. 2016 a las 21:22
6

Puedes usar Bootstrap, incluyendo la librería en el head y añadiendo la clase .navbar-fixed-bottom al footer de la siguiente forma:

class="navbar navbar-fixed-bottom"

Finalmente, en el estilo del body le pones:

body { padding-bottom: 70px; }

y quedaría muy bien.

PD: La libreria bootstrap no solo te sirve para ello, tiene muchas ventajas en cuestiones de estética.

4

Me he encontrado con este mismo problema y no he podido solucionarlo más que usando Flexbox.

El tema es relativamente sencillo (una vez te has peleado con la mitad de las respuestas ya dadas). Imaginemos que tenemos una estructura compuesta de CABECERA, CUERPO y PIE.

<body>
 <div class="cabecera"></div> <!-- header -->
 <div class="cuerpo"></div> <!-- main -->
 <div class="pie"></div> <!-- footer -->
</body>

A ésta vamos a asignar la propiedad "display: flex" de Flexbox de esta manera:

body { // El body (o cualquier otro <div>) hace de "contenedor padre"
  display: flex;
  flex-direction: column;
}

Asumimos, por ejemplo, que CABECERA y PIE tienen un tamaño asignado de:

.cabecera, .pie {
  height: 10em;
  background-color: grey;
}

Ahora a CUERPO ya podemos añadirle una característica única que hará la magia:

.cuerpo {
  flex-grow: 1; // En este caso CUERPO se comporta como "elemento hijo"
  background-colour: #333333;
}

De esta forma le estamos dando la altura sobrante al contenido en CUERPO, y éste impulsará PIE hacia la parte inferior de la pantalla, sea la altura que sea.

2

Buenas.. Una manera practica para incluirlo seria..

Teniendo el archivo footer.php

?php
    echo "<footer> Copyright &copy; "  . date("Y") ." -   tudireccion.com </footer>";
?>

Con las propiedades estilo.css

/* Pie de pagina*/
footer {
        text-align: center;
        font-family: sans-serif;
        color: whitesmoke;
        width: 100%;
        bottom: 0;
        position:fixed;
    }

E invocándolo desde cualquier página con..

<?php include 'footer.php'; ?>

Espero haya servido, saludos..

1
  • Tambien podes usar clear: both; en el css Commented el 23 may. 2017 a las 14:59
2

no se si sirve, pero enconter una buena solucion, hay que usar la posicion relativa...

footer #pie_pagina {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 300px;
    background-color: black;
}
1
  • 2
    gracias por el aporte y bienvenido pero con base en tu propio comentario te recomendaría que antes de colocar una respuesta pruebes la misma para asegurar que es una opción mas que siempre será bien recibida
    – user75901
    Commented el 12 oct. 2018 a las 0:00
1

Si queres aca hay un enlance a github

Lo resolvi de la siguiente forma:

<body>
    <div>
        <!-- Navigation -->
        <nav class="nav">
            <img src="icono.png" alt="" class="nav__logo"></a>
            <span class="nav__title">Navigation</span>
            <ul class="nav__ul">
                <li class="nav__li"><a href="#">Inicio</a></li>
                <li class="nav__li"><a href="#">Pepes</a></li>
                <li class="nav__li"><a href="#">Jaimes</a></li>
            </ul>
        </nav>
    </div>
    <div>
        <section class="content">
        </section>
    </div>
    <div>
        <!-- Footer -->
        <footer class="footer">
            <p class="footer__p">
                &copy; Copyright 2020 &copy; <a href="#">Pingui Studio</a>
            </p>
        </footer>
    </div>
</body>

hice un contenedor nuevo que seria lo que iria dentro, en tu caso seria la tabla, una vez tenes eso le di el estilo al nav y al footer, que el nav ocupara 3.5 em de alto 100vw de ancho y que estuviera pegado arriba poniendo 0 de margin, y el footer le puse position relative bottom 0, pero lo que hace esto es que lo posiciona segun el flujo de la pagina, asi que si no se escribe nada en el content el footer se sube, eso es lo que pasa en tu caso, entonces tendrias que hacer lo siguiente: ponerle una clase al contenido que aca va a ser .content y darle un min-height de 77.6vh o lo que se ajuste a tu página

/* Content */
.content {
    background-color: #ffffff;
    margin: 1em;
    min-height: 77.6vh;
    padding: 1em;
}

y ahi queda, y si pones mas elementos dentro del content el footer ira bajando y si no hay contenido, la caja quedaria en 77.6vh porque tiene la propiedad de min-hight.

0

Con position fixed estara siempre visible en la parte mas baja si es lo que se desea:

footer{
    position: fixed;
    bottom: 0;
}
1
-1

Una forma muy sencilla de hacer eso es colocando un tamaño al footer en porcentaje, por ejemplo así:

footer {
   padding: 10%;
}
1
  • Sencillo es un término relativo. Por favor explica más concretamente que beneficios cuantificables tiene hacerlo así. Commented el 19 nov. 2020 a las 20:57

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