Question

Buenos Días Comunidad, estoy programando el diseño Responsive-Fluid de mi página Web y tengo una ventana que lanzo con jquery -> fadeIn(time);
este es el html de mi ventana la cual es lo más popular:

<div id="_maspopular" class="modal">    
    <div class="content">
      <header>
        <p class="titulo">Más Popular</p>        
        <ul>
          <li onclick="showmost('#_mnoticias');"><i class="fa fa-newspaper-o"></i></li>
          <li onclick="showmost('#_mvideos');"><i class="fa fa-video-camera"></i></li>
          <li onclick="showmost('#_maudios');"><i class="fa fa-volume-up"></i></li>
        </ul>
        <p class="hide salir">X</p>
        <a class="search" href=""><i class="fa fa-search"></i></a>
      </header>      
      <div id="_mlist">
        <ul class="_mnoticias">
          <?php foreach ($maspopulares['noticias'] as $value) { ?>
          <a href="<?php echo base_url().'s/'.$value->shortlink; ?>"><li>
            <p><?php echo $value->titulo; ?></p>
            <footer>
              <span><?php echo $value->fecha; ?></span>
              <span><?php echo $value->visitas; ?></span>
            </footer>
          </li></a>
          <?php } ?>
        </ul>
        <ul class="_mvideos">
          <?php foreach ($maspopulares['videos'] as $value) { ?>
          <a href="<?php echo base_url().'s/'.$value->shortlink; ?>"><li>
            <p><?php echo $value->titulo; ?></p>
            <footer>
              <span><?php echo $value->fecha; ?></span>
              <span><?php echo $value->visitas; ?></span>
            </footer>
          </li></a>
          <?php } ?>
        </ul>
        <ul class="_maudios">
          <?php foreach ($maspopulares['audios'] as $value) { ?>
          <a href="<?php echo base_url().'s/'.$value->shortlink; ?>"><li>
            <p><?php echo $value->titulo; ?></p>
            <footer>
              <span><?php echo $value->fecha; ?></span>
              <span><?php echo $value->visitas; ?></span>
            </footer>
          </li></a>
          <?php } ?>
        </ul>
      </div>   
    </div>
</div>

y el CSS:

.modal{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    z-index: 5;
    display: none;
    min-height: 100%;
    //display: table;
    height: 100% !important;    
    table-layout: fixed;
    width: 100%;
}
#_maspopular{
    .content{
        background-color: #fff;
        bottom: 0px;
        left: 0px;
        right: 0px;
        top: 0px;
        position: fixed;    
        z-index: 6; 
    }
    header{
        position: fixed;
        width: 100%;
        height: 40px;
        background: @fondo;
        .titulo{
            float: left;
            font-size: 0.9em;
            padding: 7px;
            font-weight: bold;
            color: rgb(255, 255, 255);
        }
        ul{
            width: 35%;
            float: left;
            li{
                display: inline-block;
                font-size: 20px;
                padding: 5px;               
            }
        }
        .salir{
            float: right;
            font-weight: bold;
            font-size: 1.3em;
            padding: 3px 6px 3px 3px;
            color: rgb(255, 255, 255);
        }
        .search{
            float: right;
            font-size: 1.3em;
            padding-top: 7px;
            padding-right: 7px;
        }
        .fa-search{
            color: #fff;
            float: right;
        }
    }
    footer{
        color: rgb(152, 152, 152);
        text-align: right;
        font-size: .8em;
    }
    #_mlist{
        margin-top: 40px;       
    }       

    ._mnoticias{                
        li{
            display: inline-block;          
            text-align: left;
            color: black;
            border-bottom: 1px solid #108CE8;
            padding-bottom: 2px;
            font-weight: bold;
            padding-right: 3px;
            padding-left: 4px;
        }
    }
    ._mvideos{
        li{
            display: inline-block;
            width: 95%;
            text-align: left;           
            border-bottom: 1px solid @fondo_mostvideos;
            padding-bottom: 5px;
            font-weight: bold;
            display: none;
        }
    }
    ._maudios{
        li{
            display: inline-block;
            width: 95%;
            text-align: left;           
            border-bottom: 1px solid @fondo_mostaudios;
            padding-bottom: 5px;
            font-weight: bold;
            display: none;
        }
    }
}

Mi problema radica en que la lista(UL) que se muestre no me hace scroll para bajar o subir las noticias cuando el usuario entre desde su celular.
Aquí un PrintScreen:

Saludos Atentamente Dairon

Answer 1

Yo lo resolví: primero hay que poner un div contenedor con un alto fijo para el cual use 100% y luego otro div dentro del cual iran las listas, entonces en el div contenedor solo hay que poner este css:.3

.scroll-box{
        margin-top: 40px;
        height: 100%;       
        border: 1px solid #ddd;     
        overflow-y: scroll;     
    }   

y en el segundo div:

.scroll-content{
        height: auto;
    }

y funcionó al 100%