javascript - 高度 100% 属性在侧面导航栏中的 bootstrap 3 的 css 中不起作用

Question

基本上，侧导航栏在滚动时不会保持 100% 的高度，当您单击两个 ul 时，当然没有足够的侧边栏，因此 ul 会消失。我添加了 height:100%;我是否在任何地方放错了 nav 或 div，这就是高度不是 100% 的原因？

        .pdsa-sn-wrapper{
            position:absolute;
            top:3.6em;
            left:0em;
            width:13em;
            height:100%;
            background-color:#FF9900; /*orange.*/
            transition:left 0.3s linear;
            -moz-transition:left 0.3s linear;
            -webkit-transition:left 0.3s linear;
        }
        
        .pdsa-sn-wrapper ul {
            list-style:none;
            width:11em;
            margin-top:2em;
            margin-left:1em;
            padding:0em;
            
        }

        <div class="container">
            <div class="row">
            <header>
            <a class="linkStyle" href="Default.html">My Tunes</a>
            </header>
            </div>
            <nav id="sideNavParent" class="pdsa-sn-wrapper">
                <ul>
                    <li class="pdsa-sn-brand"><a href="Default.html" class="visible-sm visible-md visible-lg">Music</a>
                    </li> 
                    <li>
                        <a href="default.html">
                            <span class="visible-sm visible-md visible-lg">Home</span>
                            <i class="glyphicon glyphicon-home visible-xs"></i>
                        </a>
                    </li>
                <li>
                        <a href="#" data-toggle="collapse"
                           data-target="#ulGenres" >
                            <span class="visible-sm visible-md visible-lg">Genres&nbsp;<b class="caret"></b></span>
                         <i class="glyphicon glyphicon-globe visible-xs"></i>
                        </a>
                    <div class="visible-sm visible-md visible-lg">
                    <ul id="ulGenres" class="collapse" data-parent="#sideNavParent">
                        <li>
                            <a href="#">All Genres</a>
                         </li> 
                         <li>
                         <a href="#">Jazz</a>
                         </li>
                         <li>
                             <a href="#">Country</a>
                         </li>
                         <li>
                             <a href="#">Rock</a>
                         </li>
                    </ul>
                   </div> 
                </li>
                   
                <li>
                        <a href="#" data-toggle="collapse"
                           data-target="#ulPlaylists">
                            <span class="visible-sm visible-md visible-lg">Playlists&nbsp;<b class="caret"></b></span>
                         <i class="glyphicon glyphicon-list-alt visible-xs"></i>
                        </a>
                          <div class="visible-sm visible-md visible-lg">
                    <ul id="ulPlaylists" class="collapse" data-parent="#sideNavParent">
                        <li>
                            <a href="#">All Playlists</a>
                         </li> 
                         <li>
                         <a href="#">My Top Rated</a>
                         </li>
                         <li>
                             <a href="#">Top Country</a>
                         </li>
                         <li>
                             <a href="#">Top Classic Rock</a>
                         </li>
                    </ul>
                   </div> 
                </li>
                <li>
                    <a href="#">
                        <span class="visible-sm visible-md visible-lg">Songs</span>
                         <i class="glyphicon glyphicon-music visible-xs"></i>
                    </a>
                    </li>
                    <li>
                        <a href="#">
                         <span class="visible-sm visible-md visible-lg">Downloads</span>
                         <i class="glyphicon glyphicon-download visible-xs"></i>
                        </a>
                    </li>
                </ul>
          </div>
            </nav>
     

Answer 1

您可以使用 height: 100vh 使导航占视口(viewport)的 100%。查找更多信息 here ...