Заполнить оставшуюся высоту боковой панели

Question

Итак, моя проблема в том, что у моей боковой панели есть другой цвет, чем на остальной части страницы. Моя боковая панель должна заполнить 100% стороны, с цветом: # 1a2327 и # 20282b. Таким образом, он будет выглядеть как кнопки навигации вплоть до конца страницы.

Я пробовал настройки <div> с высотой 100%, но это, похоже, не сработало. Кроме того, я пробовал добавить еще <li> и просто стилизовать его по-другому, также с высотой 100%, но это тоже не сработало.

100% высота, но это, похоже, не работает. Кроме того, я попытался просто добавить еще один

Here is an image of the sidebar

Некоторые HTML:

<nav class="sidebar"> 
<ul> 
    <li> 
     <a href="faqhtp.php"> 
      <span class="icon"> 
       <i class="fa fa-exclamation"></i> 
      </span> 
      <span class="expanded-link">FAQ & How to Play</span> 
     </a> 
    </li> 
    <li> 
     <a href="fair.php"> 
      <span class="icon"> 
       <i class="fa fa-link"></i> 
      </span> 
      <span class="expanded-link">Provably Fair</span> 
     </a> 
    </li> 
    <li> 
     <a href="tos.php"> 
      <span class="icon"> 
       <i class="fa fa-file-text"></i> 
      </span> 
      <span class="expanded-link">Terms of Service</span> 
     </a> 
    </li> 
    <li> 
     <a href="support.php"> 
      <span class="icon"> 
       <i class="fa fa-comment-o"></i> 
      </span> 
      <span class="expanded-link">Support</span> 
     </a> 
    </li> 
</ul> 
</nav> 

CSS:

.sidebar { 
height: 100%; 
border-right: 1px solid #292c31; 
float: left; 
color: #fff; 
} 
.sidebar ul { 
display: block; 
margin: 0; 
padding: 0; 
} 
.sidebar li { 
list-style-type: none; 
margin: 0; 
padding: 0; 
color: white; 
} 
.sidebar a { 
display: block; 
color: white; 
text-decoration: none; 
font-size: 16px; 
background-color: #1a2327; 
} 
.sidebar a:hover { 
color: #FF9A00; 
} 
.sidebar-name { 
background-color: #161d20; 
font-size: 18px; 
padding: 15px 30px; 
text-align: center; 
} 
.icon i { 
width: 65px; 
background-color: #20282b; 
text-align: center; 
padding: 20px; 
border-right: 1px solid #FF9A00; 
} 
.icon i:hover { 
color: #FF9A00; 
} 
.sidebar-mobile-name { 
color: #FF9A00; 
font-size: 20px; 
width: 65px; 
background-color: #161d20; 
text-align: center; 
padding: 20px; 
} 
.expanded-link { 
float: right; 
padding-top: 15px; 
padding-right: 20px; 
padding-left: 40px; 
} 

Answer 1

Try это,

.sidebar { 
width:200px; 
height: 800px; 
border-right: 1px solid #292c31; 
background:#20282b; 
} 
.sidebar ul { 
width:100%; 
height:100%; 
margin: 0; 
padding: 0; 
background-color: #1a2327; 
} 
.sidebar li { 
display: block; 
list-style-type: none; 
margin: 0; 
padding: 0; 
color: white; 
}