边栏没有显示出来

Question

HTML

<div class="row">
        <div class="col-md-2" id="nav-bar">
            <ul class="nav" data-spy="affix" data-offset-top="200">
                <li>apply</li>
                <li>about</li>
                <li>sponsor</li>
            </ul>
        </div>
        <div class="col-md-10">
            <div id="pages">
                <div id="apply-page"></div>
                <div id="about-page"></div>
                <div id="sponsor-page"></div>                       
            </div>
        </div>
    </div>

CSS：

    #nav-bar {
    z-index: 50;
    background-color: red;
    background: fixed;
    height: 100%;
}

#pages>div {
    height: 100vh;
    width: 85vw;
}

#apply-page {
    background-color: black;
}

我得到以下结果：

侧边栏没有红色背景，并且它没有显示在开发工具中，我也看不到

中的文字。这是怎么回事？

Answer 1

尝试使用％而不是vh / vw。

Answer 2

你有一个css覆盖问题：

 background-color: red;
 background: fixed;

只留下背景会删除您为其设置的所有其他值，所以正确的方法是：

 background-color: red;
 background-attachment: fixed;