Twitter引导移动导航

Question

我负责让网站上的移动导航按预期工作，但我遇到了一些问题。

这是一个link我的代码，问题是，它看起来我也想要它，功能是那里我想要它做的是当它下降，导航栏占用100％的屏幕而不是激活滚动条。

我已经尝试使用代码：overflow: hidden;和overflow-y: hidden;这些都没有奏效。如果链接已过期，则下面提供了一些代码。

 <div class="modal fade" id="myModal" role="dialog"> 
      <div class="modal-dialog"> 

       <!-- Modal content--> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button class="close" type="button" data-dismiss="modal">×</button> 
         <h4 class="modal-title">Session Timeout</h4> 
        </div> 
        <div class="modal-body"> 
         <p> 
          <label>Your session has not been refreshed for 20 minutes, you will be logged out after 30 seconds. If you wish to continue working click the button below.</label> 

         </p> 
        </div> 
        <div class="modal-footer"> 


         <asp:button class="btn btn-default" id="Button1" data-dismiss="modal" onclientclick="stopTimer('<%= FinalTimer.ClientID %>')" text="Continue Working" runat="server"> 

        </asp:button></div> 
       </div> 

      </div> 
     </div> 


     <div class="navbar navbar-inverse navbar-fixed-top"> 
      <nav class="navbar navbar-default" role="navigation"> 
       <div class="navbar-header"> 
        <button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 


       <div class="navbar-collapse collapse"> 
<div id="MainMenu"> 
    <div class="list-group panel"> 
    <a class="list-group-item list-group-item-success" href="#demo3" data-toggle="collapse" data-parent="#MainMenu">Admin</a> 
    <div class="collapse" id="demo3"> 
     <a class="list-group-item1" href="#SubMenu1" data-toggle="collapse" data-parent="#SubMenu1">Placements<i class="fa fa-caret-down"></i></a> 
     <div class="collapse list-group-submenu" id="SubMenu1"> 
     <a class="list-group-item2" href="#" data-parent="#SubMenu1">New placement</a> 
     <a class="list-group-item2" href="#" data-parent="#SubMenu1">End Placement</a> 
     <a class="list-group-item2" href="#" data-parent="#SubMenu1">New Referal</a> 
     <a class="list-group-item2" href="#" data-parent="#SubMenu1">End Referal</a> 
     </div> 
     <a class="list-group-item1" href="#SubMenu2" data-toggle="collapse" data-parent="#SubMenu2">Appliences<i class="fa fa-caret-down"></i></a> 
     <div class="collapse list-group-submenu" id="SubMenu2"> 
     <a class="list-group-item2" href="#" data-parent="#SubMenu2">Fridge</a> 
     <a class="list-group-item2" href="#" data-parent="#SubMenu2">Freezer</a> 
     </div> 
     <a class="list-group-item1" href="javascript:;">Backgrounds</a> 
    </div> 


    <a class="list-group-item list-group-item-success" href="#demo4" data-toggle="collapse" data-parent="#MainMenu">Item 4</a> 
    <div class="collapse" id="demo4"> 
     <a class="list-group-item1" href="">Subitem 1</a> 
     <a class="list-group-item1" href="">Subitem 2</a> 
     <a class="list-group-item1" href="">Subitem 3</a> 
    </div> 
    </div> 
</div> 



        <ul class="nav navbar-nav navbar-right"> 
         <li> 
          <asp:loginview runat="server" viewstatemode="Disabled"> 
           <anonymoustemplate> 
            <ul class="nav navbar-nav navbar-right"> 
             <li><a href="~/Account/Login" runat="server">Log in</a></li> 

            </ul> 
           </anonymoustemplate> 
           <loggedintemplate> 
            <ul class="nav navbar-nav navbar-right"> 
             <li> 
              <asp:loginstatus runat="server" onloggingout="Unnamed_LoggingOut" logoutpageurl="~/" logouttext="Log off" logoutaction="Redirect"> 
             </asp:loginstatus></li> 
            </ul> 
           </loggedintemplate> 
          </asp:loginview> 
         </li> 

        </ul> 
       </div> 
      </nav> 
     </div> 


    .navbar { 
    position: relative; 
    min-height: 50px; 
    border: 1px solid transparent; 
    overflow-x:hidden; 
    overflow-y:hidden; 
    max-height:100%; 
} 

.navbar:before, 
.navbar:after { 
    display: table; 
    content: " "; 

} 

.navbar:after { 
    clear: both; 

} 

.navbar:before, 
.navbar:after { 
    display: table; 
    content: " "; 
} 

.navbar:after { 
    clear: both; 
} 

对此的任何建议都会令人惊叹。

Answer 1

如果您打开开发人员工具（Chrome/IE中的F12），并在扩展后查看该元素的计算标签，则会看到它具有max-height集合，这是导致滚动条。

要删除这一点，并有max-height为全屏，加100vh的max-height你的CSS：

<div class="navbar-collapse collapse fullscreen-navbar-collapse"> 

.fullscreen-navbar-collapse { 
    max-height: 100vh; 
} 

如果你只希望它这个在更小的设备，包裹CSS中媒体查询：

@media (max-width: 767px) { 
    .fullscreen-navbar-collapse { 
     max-height: 100vh; 
    } 
}