1

Hice un componente footer para situarlo siempre al final del body, quiero que cuando haya poco contenido este se situé en el final y cuando haya mucho se tenga que hacer scroll hasta llegar al final y visualizarlo.
Leyendo algunas preguntas y sus correspondientes respuestas hice algunas pruebas pero sin resultado, lo mejor que conseguí fue poner un poco de css en el componente y cuando hay poco contenido se muestra al final de la página pero cuando hay más este se queda visible pero al final de la pantalla.

Código css que use en el componente footer

.position {
    position: relative;
    bottom: 0;
}

Componente html del footer

<div class="container-fluid bg-dark text-light p-1 text-center position mt-3">
    <div class="row">
        <div class="col">
            &copy; Copyright 2021 Julio Pillado Castillo
        </div>
    </div>
</div>

Componente html del app

<app-navbar></app-navbar>

<div class="container-fluid">
  <app-filter></app-filter>
</div>

<div class="container">
  <router-outlet></router-outlet>
</div>

<app-footer></app-footer>

2 respuestas 2

1

Intenta esto modificado tu div.

<div class="container-fluid bg-dark text-light p-1 text-center mt-3 fixed-bottom">
    <div class="row">
        <div class="col">
            &copy; Copyright 2021 Julio Pillado Castillo
        </div>
    </div>
</div>

fixed-bottom: Coloque un elemento en la parte inferior de la ventana gráfica, de borde a borde. Asegúrese de comprender las ramificaciones de la posición fija en su proyecto; es posible que deba agregar CSS adicional.

1

Tu contenedor debe tener position:relative Este no afecta a si mismo, pero si a los hijos. El div hijo debería tener el alineamiento bottom:0 y position:absolute. Esto se alineará pero al contenido del padre

.container-position {
 height: 100vh;
 width: 100%;
 position: relative;
 background-color: cyan;
}

.footer {
 position: absolute;
 bottom: 0;
 height: 25px;
 background-color: blue;
 width: 100%;
}
<div class="container-position">
  <h1>Contenido</h1>
  <div class="footer">
  </div>
</div>

Tu Respuesta

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

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