Не хотите, чтобы он прокручивался, если он соответствует высоте

Question

Я проектирую левую панель меню слева, используя ul > li. A Div (.menu_bar) содержит это меню ul > li, и оно расположено относительно 100% высоты.

Работа идеально

Я хочу, чтобы эта строка меню на стороне для просмотра с помощью прокрутки (а не строки меню прокрутки, но свитка тела), если высота окна просмотра не достаточно, чтобы покрыть.

не работает

Также я хочу, что если есть дополнительная высота доступна, то она должна охватывать высоту сиденья экрана. Это означает, что div .menu_bar div должен соответствовать высоте отдыха.

Пробовал до сих пор:

• Также используется высота: 100vh раньше, но он добавляет прокрутки, даже она имеет достаточную высоту;
• Создано Demo

body { 
 
    margin:0px; 
 
    padding:0px; 
 
    overflow:auto; 
 
    color:white; 
 
    width:100%; 
 
} 
 
.menu_bar { 
 
    margin:0px; 
 
    position:relative; 
 
    top:56px; 
 
    float:left; 
 
    left:0px; 
 
    min-height:100% !important; 
 
    text-align:center; 
 
    font-size:12px; 
 
    letter-spacing:1px; 
 
    background:#2c2b39; 
 
    width:auto; 
 
} 
 
.menu_bar ul { 
 
    list-style:none; 
 
    padding:0px; 
 
    margin:0px; 
 
    width:auto; 
 
} 
 
.menu_bar ul li { 
 
    height:auto; 
 
    padding:10px; 
 
    margin:0px auto; 
 
    text-align:center; 
 
    border-left: 3px solid transparent 
 
    /*#03D4D7*/ 
 
    ; 
 
    border-bottom: 1px solid #22212C; 
 
} 
 
.menu_bar img { 
 
    display:block; 
 
    margin:0px auto; 
 
    margin-bottom:10px; 
 
    padding:0px auto; 
 
}

<div class="menu_bar"> 
 
    <ul> 
 
     <li style="border-left: 3px solid #03D4D7; background:#1B1924;"> 
 
      <img src="home.png" /> 
 
      <label>Home</label> 
 
     </li> 
 
     <li> 
 
      <img src="home.png" /> 
 
      <label>Dashboard</label> 
 
     </li> 
 
     <li> 
 
      <img src="home.png" /> 
 
      <label>Log Stats</label> 
 
     </li> 
 
     <li> 
 
      <img src="home.png" /> 
 
      <label>Network</label> 
 
     </li> 
 
     <li> 
 
      <img src="home.png" /> 
 
      <label>Settings</label> 
 
     </li> 
 
    </ul> 
 
</div>

Answer 1

Поскольку .menu_bar DIV позиционируется 56px из верхней части документа, вы можете дать ему мин-высота calc(100vh - 56px), что сделает его заполнить остальная часть экрана.

JSFiddle Пример: http://jsfiddle.net/h8scghLm/4/

Демо:

body { 
 
    margin:0px; 
 
    padding:0px; 
 
    overflow:auto; 
 
    color:white; 
 
    width:100%; 
 
} 
 
.menu_bar { 
 
    min-height: calc(100vh - 56px); 
 
    margin:0px; 
 
    position:relative; 
 
    top:56px; 
 
    float:left; 
 
    left:0px; 
 
    text-align:center; 
 
    font-size:12px; 
 
    letter-spacing:1px; 
 
    background:#2c2b39; 
 
    width:auto; 
 
} 
 
.menu_bar ul { 
 
    list-style:none; 
 
    padding:0px; 
 
    margin:0px; 
 
    width:auto; 
 
} 
 
.menu_bar ul li { 
 
    height:auto; 
 
    padding:10px; 
 
    margin:0px auto; 
 
    text-align:center; \t 
 
    border-left: 3px solid transparent/*#03D4D7*/; \t 
 
\t border-bottom: 1px solid #22212C; \t 
 
} 
 
.menu_bar img { 
 
    display:block; 
 
    margin:0px auto; 
 
    margin-bottom:10px; 
 
    padding:0px auto; 
 
}

<div class="menu_bar"> 
 
    <ul> 
 
     <li style="border-left: 3px solid #03D4D7; background:#1B1924;"> 
 
      <img src="home.png" /> 
 
      <label>Home</label> 
 
     </li> 
 
     <li> 
 
      <img src="home.png" /> 
 
      <label>Dashboard</label> 
 
     </li> 
 
     <li> 
 
      <img src="home.png" /> 
 
      <label>Log Stats</label> 
 
     </li> 
 
     <li> 
 
      <img src="home.png" /> 
 
      <label>Network</label> 
 
     </li> 
 
     <li> 
 
      <img src="home.png" /> 
 
      <label>Settings</label> 
 
     </li> 
 
    </ul> 
 
</div>