Question

所以我的问题是我的侧栏有另一种颜色而不是页面的其他部分。我的侧边栏应填写100％的侧面，颜色为：＃1a2327和＃20282b。所以它看起来像导航按钮一直到页面的末尾。

我已尝试设置高度为100％的<div>，但这似乎不起作用。此外，我尝试添加另一个<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;
}

填充剩余高度侧边栏

1 个答案: