填充剩余高度侧边栏

Question

所以我的问题是我的边栏颜色与页面其余部分不同。我的边栏应填充 100% 的边，颜色为：#1a2327 和 #20282b。所以看起来导航按钮一直向下到页面末尾。

我试过将 <div> 的高度设置为 100%，但这似乎不起作用。我也试过添加另一个 <li> 并以不同的方式设置它的样式，高度也是 100%，但这也没有用。

具有 100% 的高度，但这似乎不起作用。我也尝试过添加另一个

部分 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

试试这个，

.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;
}

填充剩余高度侧边栏

Fill remaining height sidebar

html

sidebar