0

Tengo una div contenedor y una lista ul con sus respectivos li activé el scroll vertical, funciona pero los últimos 3 elementos no se muestran. Cómo puedo corregir este error?

mi lista luce así:

    .container-lista {
        height: 100%;
        width: 100%;
        overflow-y: scroll;
    }
    .menu-li {
        width: 100%;
        padding-right: 20px;
        padding-left: 36px;
        padding-top: 13px;
        padding-bottom: 13px;
        color: #111111;
    }
      <div className="container-lista">
           <ul>
               <li className="menu-li">1</li>
               <li className="menu-li">2</li>
               <li className="menu-li">3</li>
               <li className="menu-li">4</li>
               <li className="menu-li">5</li>
               <li className="menu-li">6</li>
               <li className="menu-li">7</li>
               <li className="menu-li">8</li>
               <li className="menu-li">9</li>
               <li className="menu-li">10</li>
               <li className="menu-li">11</li>
               <li className="menu-li">12</li>
               <li className="menu-li">13</li>
               <li className="menu-li">14</li>
               <li className="menu-li">15</li>
               <li className="menu-li">16</li>
               <li className="menu-li">17</li>
               <li className="menu-li">18</li>
               <li className="menu-li">19</li>
               <li className="menu-li">20</li>
               <li className="menu-li">21</li>
               <li className="menu-li">22</li>
               <li className="menu-li">23</li>
               <li className="menu-li">24</li>
               <li className="menu-li">25</li>
               <li className="menu-li">26</li>
          </ul>
     </div>

El scroll funciona, pero no llega hasta el ultimo elemento como lo muestro a continuación: scrollNotWorking

2
  • 2
    Pues yo reproduje tu ejercicio y los elementos se visualizan bien, ¿desde que dispositivo vez esto?
    – user128299
    Commented el 16 jun. 2020 a las 23:38
  • 1
    ¿Tienes alguna forma de reproducir esto de mejor manera? En el código que compartes se visualiza bien. Probablemente sea que algo está calculando erradamente la altura del contenedor.
    – Rod
    Commented el 18 jun. 2020 a las 0:23

1 respuesta 1

1

solo agregue la clase height en tu etiqueta ul

.container-lista {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
}
ul{
    height: 100%;
}
.menu-li {
    width: 100%;
    padding-right: 20px;
    padding-left: 36px;
    padding-top: 13px;
    padding-bottom: 13px;
    color: #111111;
}
 <div className="container-lista">
       <ul>
           <li className="menu-li">1</li>
           <li className="menu-li">2</li>
           <li className="menu-li">3</li>
           <li className="menu-li">4</li>
           <li className="menu-li">5</li>
           <li className="menu-li">6</li>
           <li className="menu-li">7</li>
           <li className="menu-li">8</li>
           <li className="menu-li">9</li>
           <li className="menu-li">10</li>
           <li className="menu-li">11</li>
           <li className="menu-li">12</li>
           <li className="menu-li">13</li>
           <li className="menu-li">14</li>
           <li className="menu-li">15</li>
           <li className="menu-li">16</li>
           <li className="menu-li">17</li>
           <li className="menu-li">18</li>
           <li className="menu-li">19</li>
           <li className="menu-li">20</li>
           <li className="menu-li">21</li>
           <li className="menu-li">22</li>
           <li className="menu-li">23</li>
           <li className="menu-li">24</li>
           <li className="menu-li">25</li>
           <li className="menu-li">26</li>
      </ul>
 </div>

1
  • Estas usando bootstrap? talvez podrias compartir mas de tu html para entrar en contexto, ya que el codigo asi como lo posteaste muestra correctamente los 26 elementos Commented el 16 jun. 2020 a las 23:38

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.