CSS如何將菜單/導航的高度擴展到頁腳？

Question

我創建了滑出式導航，可以從常規導航大小打開和關閉以縮小導航大小。我想要導航菜單一直走到頁腳的頁腳。目前它與頁腳重疊並且不會一直走到頁腳。

我該如何將導航的高度向下擴展並且不重疊頁腳，但可以根據需要將頁腳向下推。

鏈接到我工作的代碼fiddle

JS

$(document).ready(function() { 

     /* 
      $("ul.nav#main-menu li ").click(function() { 
      $(this).toggleClass("toggle-button-on").find(".fa-3x").removeClass("fa-3x").addClass("fa-lg"); 
      }); */ 
      $(".nav#main-menu ").on("click", ".toggle-button-on", function() { 
      $(".toggle-button-on").toggleClass("toggle-button-on toggle-button-off"); 
      $(".nav .fa-lg").toggleClass("fa-lg fa-3x"); 
      $(".nav#main-menu .toggle-button").toggleClass("nav-slim"); 
      $(".nav#main-menu li a i").css(
      { 
       'font-size' : '30px', 
       'line-height' : '100px' 
      }); 
      $(".nav#main-menu span").hide(); 
      $("#menu .navbar-side").css("width","64px"); 
      $("#menu").css("width","64px"); 
      $("#content-panel ").css("margin-left","100px"); 


      $('[data-toggle="tooltip"]').tooltip('enable'); 
      }); 
      $(".nav#main-menu").on("click", ".toggle-button-off", function() { 
      $(".toggle-button-off").toggleClass("toggle-button-off toggle-button-on"); 
      $(".nav .fa-3x").toggleClass("fa-3x fa-lg<></>"); 
      $(".nav#main-menu span").show(); 
      $(".nav#main-menu li a i").css(
      { 
       'font-size' : '1em', 
       'line-height' : '' 
      }); 
      $("#menu .navbar-side").css("width",""); 
      $("#menu").css("width",""); 
      $("#content-panel ").css("margin-left",""); 
      $('[data-toggle="tooltip"]').tooltip('disable'); 
      }); 

     }); 

HTML

<div class="subheader-bar"> 
     <div class="row"> 
     <div class="logo-b pull-left" style="border:none"> 
      <img src="./images/hello-moto-4.jpg" alt="Hello Moto" class="img-responsive"> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse pull-right"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="bm_reportwriter_tpl-v3.html" class="text-center"><i class="fa fa-home fa-2x "></i> <br>Home</a></li> 
      <li><a href="bm_summary_tpl.html" class="text-center"><i class="fa fa-info-circle fa-2x "></i> <br>About</a></li> 
       <li><a href="bm_linechart_tpl.html" class="text-center"><i class="fa fa-area-chart fa-2x"></i> <br>Charts</a></li> 
      <li><a href="#" class="text-center"><i class="fa fa-users fa-2x"></i> <br>Partners</a></li> 
      <li><a href="#" class="text-center"><i class="fa fa-question-circle fa-2x"></i> <br>FAQ's</a></li> 
      <li><a href="#" class="text-center"><i class="fa fa-list-ul fa-2x"></i><br> News</a></li> 
      </ul> 
     </div> 
    </div> 
    </div> 
     <!-- Static Navigation --> 
    <nav class="navbar navbar-inverse navbar-static-top"> 
     <div class="container-fluid"> 
     <div class="navbar-header v-spacer1"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Moto Moto </a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <form class="navbar-form navbar-right v-spacer1"> 
     <div class="input-group"> 
      <span class="input-group-btn"> 
       <button id="basic-search" class="btn btn-default " type="button" > <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
      </span>    
      <input type="text" id="basicsearchVal" class="form-control" placeholder="Enter a Ticker Symbol,CERT, BHCor a fragment of a Bank Name,." autocomplete="on"> 


       <span class="input-group-btn spacer-l"> 
       <button type="button" class="btn btn-primary " data-toggle="modal" data-target=".bs-example-modal-lg"> Advanced Search</button> 
      </span> 
      </div> 

      </form> 
     </div> 
     </div> 
    </nav> 


<!-- End Navigation --> 


    <!-- LEFT NAVIGATION --> 
      <div id="control-panel">  
     <div id="menu"> 
      <nav class="navbar-default navbar-side" role="navigation"> 
      <div class="sidebar-collapse"> 

        <ul class="nav" id="main-menu"> 
         <li> 
          <a class="toggle-button-on" data-toggle="tooltip" data-placement="right" data-original-title="Open/Close"><i class="fa fa-exchange"></i><span> Open/Close</span></a> 
         </li> 
         <li> 
         <a ui-sref="Home" data-toggle="tooltip" data-placement="right" data-original-title="User1"><i class="fa fa-user fa-lg"></i><span> Welcome User1</span></a> 
         </li> 

         <li> 
         <a ui-sref="Home" data-toggle="tooltip" data-placement="right" data-original-title="Home"><i class="fa fa-home fa-lg"></i><span> Home</span></a> 
         </li> 
         <li> 
         <a ui-sref="ScenarioComparison" data-toggle="tooltip" data-placement="right" data-original-title="Search"><i class="fa fa-search fa-lg"></i><span> Search</span></a> 
         </li> 
         <li ng-controller="scenarioController"> 
         <a data-toggle="tooltip" data-placement="right" data-original-title="Charts"><i class="fa fa-bar-chart-o fa-lg"></i><span> Charts</span></a> 
         </li> 
         <li> 
         <a ui-sref="ScenarioComparison" data-toggle="tooltip" data-placement="right" data-original-title="WatchList"><i class="fa fa-table fa-lg"></i><span> Todays List</span></a> 
         </li> 
         <li> 
         <a ui-sref="Dashboard" data-toggle="tooltip" data-placement="right" data-original-title="DashBoard"><i class="fa fa-dashboard fa-lg"></i><span> FAQ</span></a> 
         </li> 
        </ul> 

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

    <!-- END LEFT NAVIGATION --> 

<div class="container-fluid"> 
    <div class="row"> 

     <div class="col-md-11" style="width:500px; float:right"> 
    <h3 class="subheader" style="margin-top:50px"> Sample Info </h3> 
     <div class="redmond"> 
     <p> 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     </p> 
      <table id="output"></table> 

     </div> 
    </div> 
    </div>  
</div>  

<!-- begin footer --> 

    <footer class="footer"> 
     <div class="container"> 
     <div class="tbs-content-container" > 
      <div class="tbs-content" > 
       <div class="tbs-row"> 
        <div class="tbs-col tbs-w50 tbs-responsive" style="padding-top:12px;"> 
         <p class="tbs-text-size-sm-1x" style="font-weight:bold;">HQ:</p> 
         <p class="tbs-text-size-sm-1x"><i class="fa fa-map-marker fa-lg fa-fw"></i>&nbsp;&nbsp;3 moto ave, Diagon Alley, NJ 07364</p> 
         <p class="tbs-text-size-sm-1x"><i class="fa fa-envelope fa-lg fa-fw"></i>&nbsp;&nbsp;<a href="mailto:info@totalbanksolutions.com">info@motowho.com</a></p> 
         <p class="tbs-text-size-sm-1x"><i class="fa fa-phone fa-lg fa-fw"></i>&nbsp;&nbsp;(800) 300-MOTO</p> 
        </div> 
        <div class="tbs-col tbs-w50 tbs-responsive tbs-text-right"> 
         <p><a href="index.html"><img class="tbs-responsive" src="images/moto_logo_transp.png" alt="moto Logo" style="max-width:150px"></a></p> 
         <p class="tbs-text-size-sm-2x" id="footer-copyright">© 2016 MOTO Who.</p> 
        </div> 
       </div> 
       <br><br> 
      </div> 
      </div> 
     </div> 
    </footer> 

Answer 1

你必須在這裏

選擇使用position:fixed

使用position:fixed固定菜單屏幕，然後只需要window高度，給人height:100%將做的工作，這裏是css

#control-panel{ 
    overflow:hidden; 
    height:100%; 
    width:auto; 
    position:fixed; 
    top:0px; 
    bottom:0px; 
    background-color:#34495e; 
    margin-top:0px; 
    z-index:9999; 
} 

見FIDDLE

第二使用位置：絕對

如果你想菜單是position:absolute。那麼你應該需要通過使用jQuery找到body高度。

然後沿着這個css

#control-panel{ 
    overflow:hidden; 
    height:100%; 
    width:auto; 
    position:absolute; 
    top:0px; 
    bottom:0px; 
    background-color:#34495e; 
    margin-top:0px; 
    z-index:9999; 
} 

你必須使用jQuery的

修訂

var header_height = $(".navbar.navbar-inverse.navbar-static-top") .innerHeight() + $(".subheader-bar").innerHeight(); 

var height = $("body").innerHeight() - ($("footer").innerHeight() + header_height); 
$("#control-panel").css({ 
      "height":(height - 10)+"px", 
      "top":(header_height + 10)+"px" 
}); 

UPDATED FIDDLE