Прокручиваемая боковая панель не отображает весь контент на мобильных устройствах

Question

У меня есть боковая панель, которая хорошо отображается на рабочем столе. Но на мобильных устройствах он действует странно. (На эмуляторах мобильных устройств все в порядке). Вот несколько скриншотов с мобильного. Весь дисплей становится большим, а свитки боковой панели - немного, другой контент меню недоступен. Он также изменяется в соответствии с размером левой части.

screenshot 1 screenshot 2 Мой HTML (используя загрузчик и angularjs):

<div id="wrapper"> 
      <div class="row"> 
       <nav class="navbar navbar-fixed-top orange-back" role="navigation"> 
       <div class="container-fluid"> 
         <div class="navbar-header"> 
          <div class="navbar-brand"> 
           <a id="menu-toggle" href="" class="btn-menu toggle"> 
            <i class="fa fa-bars"></i> 
           </a>      
           <a class="no-decoration-link" href="#">STRICS</a> 
          </div> 
         </div> 
        </div> 
       </nav> 
      </div> 
      <div class="row"> 
       <!-- Sidebar --> 
       <div id="sidebar-wrapper"> 
        <nav role="navigation"> 
         <ul class="sidebar-nav nav"> 
          <h5 class="nav-group">Расходы и доходы</h5> 
          <li><a href="#newoutcome" ng-click="showingForm = 'newoutcome'">Купить материал</a></li> 
          <li><a href="#userinfo" ng-click="showingForm = 'userinfo'"> Личный кабинет</a></li> 
          <li><a href="#" ng-click="logout()"> Выйти</a></li><br><br> 
         </ul> 
        </nav> 
       </div> 
       <!-- Page content --> 
       <div id="page-content-wrapper"> 
        <div class="page-content"> 
         <div class="container-fluid"> 
          <div class="row"> 
           <div class="view-placement" ng-view></div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

Мой CSS:

@media (min-width: 768px) { 
    .sidebar-nav .navbar .navbar-collapse { 
    padding: 0; 
    max-height: none; 
    } 
    .sidebar-nav .navbar ul { 
    float: none; 
    } 
    .sidebar-nav .navbar ul:not { 
    display: block; 
    } 
    .sidebar-nav .navbar li { 
    float: none; 
    display: block; 
    } 
    .sidebar-nav .navbar li a { 
    padding-top: 12px; 
    padding-bottom: 12px; 
    } 
} 
.sidebar-nav { 
    overflow: scroll; 
} 
#wrapper { 
    padding-left: 250px; 
    transition: all 0.4s ease 0s; 
} 

#sidebar-wrapper { 
    margin-left: -250px; 
    top: 51px; 
    left: 250px; 
    width: 250px; 
    background: #FFAB62; 
    position: fixed; 
    height: 95%; 
    overflow-y: auto; 
    z-index: 1000; 
    transition: all 0.6s ease 0s; 
} 

#wrapper.active { 
    padding-left: 0; 
} 

#wrapper.active #sidebar-wrapper { 
    left: 0; 
} 

#page-content-wrapper { 
    width: 100%; 
    padding-top: 70px; 
    transition: all 0.6s ease 0s; 
    padding-right: 4px; 
} 

.sidebar-nav { 
    position: absolute; 
    top: 0; 
    width: 250px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.sidebar-nav li { 
    line-height: 20px; 
    text-indent: 20px; 
} 

.sidebar-nav li a { 
    color: #41484c; 
    display: block; 
    text-decoration: none; 
    padding-left: 20px; 
} 

.sidebar-nav li a span:before { 
    position: absolute; 
    left: 0; 
    color: #41484c; 
    text-align: center; 
    width: 20px; 
    line-height: 18px; 
} 
.nav>li>a { 
    padding: 4px 10px; 
} 
.sidebar-nav li a:hover, 
.sidebar-nav li.active { 
    color: #fff; 
    background: rgba(255,255,255,0.2); 
    text-decoration: none; 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
} 

#menu-toggle { 
    text-decoration: none; 
    float: left; 
    color: #41484c; 
    padding-right: 15px; 
} 

@media (max-width:767px) { 
    #wrapper { 
     padding-left: 0; 
    } 

    #sidebar-wrapper { 
     left: 0; 
    } 

    #wrapper.active { 
     position: relative; 
     left: 250px; 
    } 

    #wrapper.active #sidebar-wrapper { 
     left: 250px; 
     width: 250px; 
     transition: all 0.4s ease 0s; 
    } 

    #menu-toggle { 
     display: inline-block; 
    } 
} 

Answer 1

Попробуйте ниже код после тега головы.

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<!-- Mobile support --> 
<meta name="viewport" content="width=device-width, initial-scale=1">