1

Quiero hacer que el footer siempre este hasta abajo de todo, en las demás páginas sale bien, pero cuando creo un archivo html nuevo se posiciona así. Ya usé el position:absolute y bottom:0 en el footer, pero cuando en las otras páginas hago scroll se queda arriba el footer,

   
                .foter {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    background-color: black;
                    color: white;
                    margin-top: 8rem;
                    text-align: center;
                    bottom: 0;
                }
<footer class="foter centrar-texto">

        <div class="fb  paddingtop">
            <a href="https://www.facebook.com/raspados.isla.50" class="footer-span">
                <i class="fab fa-facebook-square tamaño-iconos"></i> <br> Raspados Isla</a>
        </div>
        <div class="paddingtop">
            <i class="fas fa-map-marker-alt tamaño-iconos"></i>
            <p>30 Avenida Nte., Gonzalo Guerrero, 77710 Playa del Carmen, Q.R.</p>
        </div>

        <div class=" paddingtop">

            <i class="fab fa-whatsapp-square tamaño-iconos"></i> <br>
            <span class="footer-span">99-99-99-99-99</span>
        </div>





    </footer>

**introducir la descripción de la imagen aquí

2
  • 1
    Es decir: ¿sin importar si hay o no contenido que se mantenga al fondo de tu página? ò ¿qué se mantenga al fondo pero de forma visible?
    – user128299
    Commented el 5 dic. 2019 a las 22:22
  • 5
    Does this answer your question? ¿Cómo situar el footer siempre abajo? Commented el 6 dic. 2019 a las 11:49

2 respuestas 2

2

Tienes q darle al body un min-height acordé al tamaño que debes dejar para esa imagen o lo que sea que quieras incluir. Además, cómo te responden arriba debes darle un "position". Si el footer está dentro del body pones:

  body{min-height:100vh}

Esto hará que el alto de tu bodi siempre sea toda la pantalla como mínimo. Si quieres que esté fuera del body el footer puedes hacer un cálculo:

 body{min-height:calc(100% - 'altura del footer')}
2
  • 1
    Cuidado con el nombre que es body, ya que en caso contrario no será identificada por el navegador
    – user128299
    Commented el 5 dic. 2019 a las 22:06
  • 1
    Gracias, el auto corrector del teléfono, no me di cuenta, gracias 😅
    – JorgeGuz
    Commented el 5 dic. 2019 a las 22:09
1

Te falta agregar position: fixed. Cuando usas fixed el elemento es posicionado relativo a la ventana del navegador. Algo asi:

.foter {
                    position: fixed;
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    background-color: black;
                    color: white;
                    margin-top: 8rem;
                    text-align: center;
                    bottom: 0;
                }
a
a
a
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
a
a

a
a
a

a
a

a
a

a
a
a

a
a
a

a
a
a

a
a

a
a

a
a

<footer class="foter centrar-texto">

        <div class="fb  paddingtop">
            <a href="https://www.facebook.com/raspados.isla.50" class="footer-span">
                <i class="fab fa-facebook-square tamaño-iconos"></i> <br> Raspados Isla</a>
        </div>
        <div class="paddingtop">
            <i class="fas fa-map-marker-alt tamaño-iconos"></i>
            <p>30 Avenida Nte., Gonzalo Guerrero, 77710 Playa del Carmen, Q.R.</p>
        </div>

        <div class=" paddingtop">

            <i class="fab fa-whatsapp-square tamaño-iconos"></i> <br>
            <span class="footer-span">99-99-99-99-99</span>
        </div>





    </footer>

5
  • 1
    Ya lo hice, pero de igual manera lo resuelve el problema, cuando tengo una pagina con mucho contenido y tengo que hacer scroll, el fototer se queda en la posicion del bottom:0; pero se queda ahi, cuando haces scroll se ve el footer a la mitad de la pagina, no puedo agregar la imagen, ¿Si me entiendes?
    – Jorge
    Commented el 5 dic. 2019 a las 21:43
  • 1
    Perdon, es position: fixed
    – alanfcm
    Commented el 5 dic. 2019 a las 21:57
  • 1
    Una explicación de por que el uso de fixed ayudaría a que tanto el OP como el resto de la comunidad comprendamos tu solución
    – user128299
    Commented el 5 dic. 2019 a las 22:00
  • 1
    position:fixed hará que se quede fijo en una posición de la pantalla, no de tu site, y si no he entendido mal, no eso lo que se pretende.
    – JorgeGuz
    Commented el 5 dic. 2019 a las 22:08
  • @alanfcm en serio usar tantos <br>? Porqué no usar un div con un height alto? <div style="height: 2000px">Contenido</div> Commented el 7 dic. 2019 a las 15:10

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