2

He diseñado un dashboard utilizando la plantilla AdminLTE, en esta plantilla el sidebar no queda fijo mientras se hace scroll a la pagina, además que el sidebar va aumentando su altura (height) mientras que el div que tiene el contenido de la pagina tambien lo va haciendo lo cual no me gusta para nada ya que le estoy haciendole algunos cambios de estilo al sidebar y algunas partes del mismo quedan asi:

introducir la descripción de la imagen aquí

Me gustaria que se pueda hacer scroll sobre el menu lateral pero que no se haga scroll el contenido de la pagina tambien, solo el menu y que cuando llegue a cerrar sesion ya no se pueda bajar más.

Debería llegar hasta aquí:

introducir la descripción de la imagen aquí

Ahora bien, cuando se le haga scroll al div de la derecha (donde esta el contenido de la pagina) el menu laterial (sidebar) debería quedarse fijo.

Cómo podría hacer esto? He visto que algunas paginas webs tienen este sistema asi, pero no se bien como hacerlo con CSS o Javascript. Alguna sugerencia que puedan darme? Se los agradecería mucho.

1
  • Es necesario ver tu estructura HTML5 y el estilo CSS que da todas esas funciones del sidebar Commented el 8 jun. 2021 a las 1:11

3 respuestas 3

0

Podrias probar con algo, como lo siguiente:

body{
  display: flex;
}

aside{
  width:30%;
  height: 100vh;
  background-color: #333;
  /* Esto lo mantendra en su sitio */
  position: fixed;
  top: 0;
  left: 0;
}

.contenido{
  width: 70%;
  height: 1000vh;
  background-color: #999;
  /* Esto equilibria lo del aside */
  position: relative;
  top: 0;
  left: 30%;
}
<body>
  <aside>
    
  </aside>
  <div class="contenido">

  </div>
</body>

0

Sería recomendable que nos pasaras el html y css de esa plantilla, si no va a ser muy complicado darte una respuesta segura. Si tuviera que hacer algo así yo, jugaría con el overflow-y: auto. Si se lo pones en el elemento que quieres que tenga el scroll y en sus ancestros debería funcionarte correctamente.

html, body, .content {
  height: 100%;
  overflow-y: auto;
}
body {
  display: flex;
  margin: 0;
}
.sidebar {
  height: 100px;
  width: 25%;
  background-color: black;
}

.content {
  height: calc(100% - 16px);
  width: 75%;
  padding: 8px;
}

.contenido-grande{
  height: 10000px;
  width: 100%;
  background-color: red;
  overflow-y: auto;
}
<body>
  <div class="sidebar">

  </div>
  <div class="content">
    <div class="contenido-grande"></div>
  </div>
</body>

0

Bro, tal vez te puedo ayudar con esto, en la etiqueta aside pon lo siguiente:

style="position: fixed;"

Te muestro como.

<aside class="main-sidebar sidebar-dark-primary elevation-4" style="position: fixed;">

Recuerda que debes cargar el css y js de la plantilla para el debido funcionamiento.

*adminlte.min.css

adminlte.min.js*

0

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.