0

tengo la duda de como hacer para que el background de la barra lateral izquierda me ocupe toda la altura de la pantalla y se siga mostrando cuando la tabla me muestre los 100 datos que tenga, no he podido logralo, si alguien me puede ayudar, le agradezco. se utiliza angular, bootstrap, css, html

introducir la descripción de la imagen aquí

CSS

.menu-navegacion {
  background-color: #00993E !important;
  flex: 1 1 0;
  max-width: 120px;
  padding: 2rem 1rem;
  height: 100vh !important ;
}

HTML

Parte del html de la barra de navegación

6
  • ¿Probaste usar en lugar de 100vh algo cómo 100% ? Otra cosa que puedes probar es en lugar de poner height usar min-height: 100vh;?
    – Jaime
    Commented el 28 may. 2022 a las 17:38
  • 1
    Pon todo el código en formato texto. Haz clic en editar y cambia la imagen del html por texto. Commented el 28 may. 2022 a las 17:41
  • @JaimeMenéndez si, ya probé con 100% y tampoco funciona. Commented el 28 may. 2022 a las 17:48
  • @MauricioContreras no me deja, me sale un error que no me deja guardar la pregunta Commented el 28 may. 2022 a las 17:49
  • ¿@CristianSilva y cambiándolo por min-height: 100vh !important;?
    – Jaime
    Commented el 28 may. 2022 a las 17:50

1 respuesta 1

0

a .menu-navegacion agregale la propiedad css position: fixed; para que no ocupe espacio real sobre los otros elementos y que al hacer scroll se mantenga visible en el viewport

top: 0; left: 0; para indicarle la posicion en el viewport y heigth: 100vh; para que ocupe todo el largo del viewport,

un overflow: auto; por si tienes muchos elementos el aside tenga su propia barra de scroll

y por ultimo tendras el problema de que el contenido del body se quedara bajo tu aside, por lo que debes aplicar un padding-left: (tamaño de tu aside); para solucionarlo.

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.