0

Estoy haciendo una pagina web para un proyecto universitario, estoy usando angular para desarrollar mas comodamente y bootstrap para las clases css, el problema que tengo es que la pagina no usa todo el espacio de la pantalla, es posible crear un body que use todo el espacio de pantalla y que en caso de tener contenido crezca? estoy usando esto en el cuerpo de la pagina:

<app-navbar></app-navbar>
<router-outlet></router-outlet>
<app-footer></app-footer>

y quisiera que quedara algo asi:

<app-navbar></app-navbar>
<div class="clase que crezca a toda la pagina">
     <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

no se que tan dificil sea hacer eso con bootstrap 4.6.1. Si alguien pudiera ayudarme de antemano muchas gracias.

1
  • ¿Inspeccionaste el código, para ver si se están aplicando paddings/margins?
    – padaleiana
    Commented el 9 ene. a las 0:11

1 respuesta 1

1

Lo que tu estas necesitando es que por defecto tenga una altura mínima, eso se logra con la propiedad min-width en css y su equivalente en bootstrap es la clase min-vh-100 que deduciendo es min (mínimo) vh (el tamaño de la pantalla del usuario) y el 100 el porcentaje completo de tu pantalla.

Tu código quedaría así:

<div class="min-vh-100">
   <app-navbar></app-navbar>
     <router-outlet></router-outlet>
   <app-footer></app-footer>
</div>

Por recomendación, tu navbar y tu footer deben ir dentro de tu div, para que sean parte de el y así también su tamaño, ya que si lo ubicas como en el código que tu publicaste, la altura de tu página web estaría conformado por navbar + tamaño de pantalla + footer, lo que se vería raro, espero haberte ayudado .

1
  • Muchas gracias si me fue de ayuda solo que si precise de usar el codigo como te mencione: <app-navbar></app-navbar> <div class="min-vh-100"> <router-outlet></router-outlet> </div> <app-footer></app-footer> Porque si no lo hago asi el codigo me crea un div que abarca toda la pantalla mas no me extiende el contenido hasta el final del div asi que el footer queda a media pantalla si el router no tiene contenido. Commented el 9 ene. a las 15:31

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.