如何在引导程序中完整高度左边栏

Question

我已经创建了一个管理仪表板面板，其中可折叠的左侧边栏存在。但问题是，如果我滚动窗口左边栏不是全高。我已经设置了包装和身体最小高度100％。但它不起作用。

CSS代码：

body{ 
     background: #f5f6f8; 
     color: #494949; 
     min-height: 100%; 
     height: 100%; 
    } 
    #wrapper { 
     padding-left: 0; 
     -webkit-transition: all 0.5s ease; 
     -moz-transition: all 0.5s ease; 
     -o-transition: all 0.5s ease; 
     transition: all 0.5s ease; 
     height: 100%; 
     min-height: 100%; 
    } 

    #wrapper.toggled { 
     padding-left: 230px; 
    } 

    #sidebar-wrapper { 
     z-index: 1000; 
     position: absolute; 
     left: 230px; 
     width: 0; 
     margin-left: -230px; 
     background-color: #fff; /*#222d32;*/ 
     color: white; 
     white-space: nowrap!important; 
     overflow: hidden; 
     -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.2); 
     -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.2); 
     box-shadow: 0 0 10px 0 rgba(0,0,0,.2); 
     -webkit-transition: all 0.5s ease; 
     -moz-transition: all 0.5s ease; 
     -o-transition: all 0.5s ease; 
     transition: all 0.5s ease; 
     top:0; 
     padding-top: 50px; 
     height: 100%; 
     min-height: 100%; 
    } 

    #wrapper.toggled #sidebar-wrapper { 
     width: 230px; 
    } 

    #page-content-wrapper { 
     width: 100%; 
     position: absolute; 
     padding: 15px; 
     padding-top: 50px; 
    } 

    #wrapper.toggled #page-content-wrapper { 
     position: absolute; 
     margin-right: -230px; 
    } 
    /* Sidebar Styles */ 

    /*metis menu*/ 

    .arrow { 
    float: right; 
    } 
    .glyphicon.arrow:before { 
    content: "\e079"; 
    } 
    .active > a > .glyphicon.arrow:before { 
    content: "\e114"; 
    } 
    .fa.arrow:before { 
    content: "\f104"; 
    } 
    .active > a > .fa.arrow:before { 
    content: "\f107"; 
    } 
    .plus-times { 
    float: right; 
    } 
    .fa.plus-times:before { 
    content: "\f067"; 
    } 
    .active > a > .fa.plus-times { 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    } 
    .plus-minus { 
    float: right; 
    } 
    .fa.plus-minus:before { 
    content: "\f067"; 
    } 
    .active > a > .fa.plus-minus:before { 
    content: "\f068"; 
    } 


    /*----end of icon--*/ 


    .sidebar-header{ 
    color: #4b646f; 
    background: #fff; 
    text-align: center; 
    padding: 12px 5px 12px 15px; 
    } 
    .sidebar-nav { 
    position: relative; 
    margin: 0; 
    padding: 0; 
    width: 230px; 
    list-style: none; 
    font-size: 14px; 
    } 


    .sidebar-nav li a { 
    color: #737373; 
    display: block; 
    text-decoration: none; 
    border-left: 3px solid transparent; 
    padding: 12px 15px 12px 15px; 
    } 
    .sidebar-nav>li>a { 
     border-top: 1px solid #f3f3f3; 
    } 
    .sidebar-nav>li.active>a, .sidebar-nav>li:hover>a { 
    background: #f5f5f5; 
    border-left: 3px solid #23b7e5; 
    text-decoration: none; 
    color: #484343; 
    } 
    .sidebar-nav li a:active, .sidebar-nav li a:focus { 
    text-decoration: none; 
    } 
    #sidebar-wrapper.sidebar-toggle { 
    transition: all 0.3s ease-out; 
    margin-left: -230px; 
    } 
    .sidebar-nav>li>.submenu { 
     list-style: none; 
     margin: 0 1px; 
     padding: 4px 4px 4px 14px; 
     font-size: 12px; 
     background-color: #fbfbfb; 
     -webkit-box-shadow: inset 0 4px 4px -2px rgba(0,0,0,.15),inset 0 -4px 4px -2px rgba(0,0,0,.15); 
     -moz-box-shadow: inset 0 4px 4px -2px rgba(0,0,0,.15),inset 0 -4px 4px -2px rgba(0,0,0,.15); 
     box-shadow: inset 0 4px 4px -2px rgba(0,0,0,.15),inset 0 -4px 4px -2px rgba(0,0,0,.15); 
    } 
    .sidebar-nav>li>.submenu a{ 
     color: #737373; 
    } 

    .sidebar-nav .submenu>li>a:hover { 
     color: #484343; 
    } 
    .sidebar-nav .fa, .submenu>li>a>.glyphicon{ 
     width: 20px; 
    } 




    .main-header{ 
     position: relative; 
     max-height: 100px; 
     z-index: 1030; 
    } 

    .main-header .logo { 
     background-color: #1FABD6; 
     color: #fff; 
     border-bottom: 0 solid transparent; 
     -webkit-transition: width .3s ease-in-out; 
     -o-transition: width .3s ease-in-out; 
     transition: width .3s ease-in-out; 
     display: block; 
     float: left; 
     height: 50px; 
     font-size: 20px; 
     line-height: 50px; 
     text-align: center; 
     width: 230px; 
     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
     padding: 0 15px; 
     font-weight: 300; 
     overflow: hidden; 
     text-decoration: none; 
    } 

    .main-header>.navbar { 
     -webkit-transition: margin-left .3s ease-in-out; 
     -o-transition: margin-left .3s ease-in-out; 
     transition: margin-left .3s ease-in-out; 
     margin-bottom: 0; 
     margin-left: 230px; 
     border: none; 
     min-height: 50px; 
     border-radius: 0; 
     background-color: #23b7e5; 
     padding-right: 20px; 

    } 


    .main-header .toggleBtn { 
     float: left; 
     background-color: transparent; 
     background-image: none; 
     padding: 15px; 
     font-family: fontAwesome; 
     text-decoration: none; 
    } 

    .main-header .toggleBtn:before { 
     content: "\f0c9"; 
    } 
    .main-header .navbar .toggleBtn,.main-header .navbar .nav>li>a { 
     color: #fff; 
    } 
    .main-header .navbar .nav .open>a, .main-header .navbar .nav .open>a:focus, .main-header .navbar .nav .open>a:hover, .main-header .navbar .nav>.active>a, .main-header .navbar .nav>li>a:active, .main-header .navbar .nav>li>a:focus, .main-header .navbar .nav>li>a:hover { 
     background: #1FABD6; 
     color: #f6f6f6; 
    } 

    .main-header .navbar .toggleBtn:hover { 
     color: #f6f6f6; 
     background-color: #1FABD6; 
     text-decoration: none; 
    } 

    .main-header .navbar .cust-nav .navbar-nav{ 
    float: right; 
    } 


    .cust-nav .navbar-nav>li { 
     float: left; 
    } 
    .cust-nav .navbar-nav { 
     margin: 0; 
     float: left; 
    } 
    .cust-nav .navbar-nav>li>a { 
     padding-top: 15px; 
     padding-bottom: 15px; 
     line-height: 20px; 
    } 


    .cust-nav .navbar-nav .dropdown:hover> a .label { 
    animation: none; 
    -webkit-animation: none; 
    } 


    .main-header .navbar .nav>li>a>.label { 
     position: absolute; 
     top: 9px; 
     right: 7px; 
     text-align: center; 
     font-size: 9px; 
     padding: 2px 3px; 
     line-height: .9; 
     animation: opacity-badge 1s infinite; 
     -webkit-animation: opacity-badge 1s infinite; 
    } 
    @keyframes opacity-badge { 
    0% { 
     transform: scale(0.5);-webkit-filter: opacity(.1); filter: opacity(.1); 
    } 
    100% { 
     transform: scale(1.8); 
    } 
    } 

    @-webkit-keyframes opacity-badge { 
    0% { 
     transform: scale(0.5); 
    } 
    100% { 
     transform: scale(0.5);-webkit-filter: opacity(.1); filter: opacity(.1); 

    } 
    } 
    .cust-nav>.navbar-nav>li>.dropdown-menu { 
     position: absolute; 
     right: 5%; 
     left: auto; 
     border: 1px solid #ddd; 
     background: #fff; 
    } 



    /*===========================content header===============================*/ 
    .content-header{ 
    position: relative; 
    min-height: 40px; 
    line-height: 39px; 
    padding: 0; 
    display: block; 
    z-index: 1; 

    } 

    .content-header h1 { 
     padding: 0; 
     margin: 0 4px; 
     font-size: 25px; 
     font-weight: lighter; 
     color: #737373; 
     line-height: 37px; 
     display: inline-block; 
     padding-left: 10px; 
    } 

    .breadcrumb { 
     background-color: transparent; 
     display: inline-block; 
     line-height: 37px; 
     margin: 0 22px 0 12px; 
     padding: 0; 
     font-size: 13px; 
     color: #333; 
     border-radius: 0; 
    } 
    .breadcrumb>li>i { 
     margin-left: 4px; 
     margin-right: 2px; 
     font-size: 20px; 
     position: relative; 
     top: 2px; 
    } 
    .breadcrumb>li, .breadcrumb>li.active { 
     color: #777; 
     -webkit-text-shadow: none; 
     text-shadow: none; 
    } 
    .breadcrumb>li>a { 
     display: inline-block; 
     color: #2dc3e8; 
    } 

    /*===========================info box===============================*/ 

    .info-orange{ 
    border-left: 5px solid #FF8B24; 
    color: #FF8B24; 
    } 

    .info-sky{ 
    border-left: 5px solid #23B7E5; 
    color: #23B7E5; 
    } 

    .info-red{ 
    border-left: 5px solid #F11212; 
    color: #F11212; 
    } 

    .info-green{ 
    border-left: 5px solid #2CDE00; 
    color: #969594; 
    } 

    hr{ 
    border-top: 1px solid #E8E8E8; 
    } 
    .info-box{ 
    min-height: 90px; 
    background-color: #fff; 
    padding: 20px; 
    border-radius: 4px; 
    webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33); 
     box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33); 
     -webkit-border-radius: 4px; 
     -moz-border-radius: 4px; 
     margin-bottom: 20px; 
    } 
    .info-left{ 
    float:left; 
    font-size: 12px; 
    color: #9C9C9C; 
    } 
    .info-left h2{ 
    margin: 0px; 
    padding: 0px; 
    } 
    .info-right{ 
    float:right; 
    } 

    /*===========================panel===============================*/ 
    .panel-default{ 

    } 


    @media(max-width: 768px){ 

    .main-header .logo, .main-header .navbar { 
     width: 100%; 
     float: left; 
     position: relative!important; 
     margin-left: 0px; 
    } 

    #sidebar-wrapper{ 
     padding-top: 100px!important; 

    } 

    .main-header .navbar .cust-nav{ 
     float: left; 
     padding-left: 20%; 
    } 

    .cust-nav>.navbar-nav>li>.dropdown-menu { 
     position: absolute; 
     right: -60%; 
     left: auto; 
     border: 1px solid #ddd; 
     background: #fff; 
    } 

    #page-content-wrapper { 
     padding-top: 100px; 
    } 

    .content-header{ 
     padding-top: 20px; 
    } 
    } 


    @media(min-width:768px) { 
     #wrapper { 
      padding-left: 250px; 
     } 

     #wrapper.toggled { 
      padding-left: 0; 
     } 

     #sidebar-wrapper { 
      width: 230px; 
     } 

     #wrapper.toggled #sidebar-wrapper { 
      width: 0; 
     } 

     #page-content-wrapper { 
      padding: 20px; 
      position: relative; 
     } 

     #wrapper.toggled #page-content-wrapper { 
      position: relative; 
      margin-right: 0; 
     } 
    } 

HTML：

 <a href="" class="logo"> 
       <!-- logo for regular state and mobile devices --> 
       <span class="logo-lg"><b>Demo</b></span> 
      </a> 

     <div class="navbar navbar-static-top" role="navigation" id="mainNav"> 
      <a href="" class="toggleBtn visible-xs1" role="button" id="menu-toggle"> 
        <span class="sr-only">Toggle navigation</span> 
       </a> 


       <div class="cust-nav"> 
        <ul class="nav navbar-nav"> 
        <!-- Messages--> 
         <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
          <i class="fa fa-envelope-o"></i> 
          <span class="label label-success">4</span> 
         </a> 
         <ul class="dropdown-menu"> 
          <li class="header">You have 4 messages</li> 
          <li>Test</li> 
          </ul> 
         </li> 

         <!-- Notifications--> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
          <i class="fa fa-bell-o"></i> 
          <span class="label label-warning">10</span> 
         </a> 
         <ul class="dropdown-menu"> 
          <li class="header">You have 10 notifications</li> 
          <li class="footer"><a href="#">View all</a></li> 
         </ul> 
        </li> 

        <!-- Settings--> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
          <i class="fa fa-user"></i> 
         </a> 
         <ul class="dropdown-menu"> 
          <li class="header">You have 10 notifications</li> 
          <li class="footer"><a href="#">View all</a></li> 
         </ul> 
        </li> 
        </ul> 
       </div> 

     </div> 
     </div> 


    <!-- page wraper --> 
    <div id="wrapper"> 



     <!-- sidebar wrapper --> 
     <div id="sidebar-wrapper"> 
     <ul class="sidebar-nav"> 


      <li class="sidebar-header">SideBar</li> 
      <li><a href="#item1"><i class="fa fa-dashboard"></i> Dashboard</a></li> 
      <li><a href="#item1"><i class="fa fa-cogs"></i> Settings</a></li> 



      <!-- Users menu --> 
      <li> 
      <a href="#" aria-expanded="false"> 
       <i class="fa fa-users"></i> 
       User 
       <i class="fa arrow pull-right"></i> 
      </a> 
      <ul class="submenu"> 
       <li><a href=""><i class="fa fa-user-plus"></i><span> Create New</span></a></li> 
       <li><a href=""> <i class="fa fa-eye"></i><span> View Users</span></a></li> 
      </ul> 
      </li><!--End of Users menu --> 



      <li><a href="#item1"><i class="fa fa-envelope-o"></i> Message</a></li> 
      <li><a href="#item1"><i class="fa fa-pencil-square-o"></i> Log</a></li> 


       </ul> 
      </div><!-- //sidebar wrapper --> 


      <!-- Page Content --> 
      <div id="page-content-wrapper"> 

      <div class="content-header"> 
      <h1>Dashboard</h1> 
      <ul class="breadcrumb pull-right hidden-xs"> 
         <li> 
          <i class="fa fa-home"></i> 
          <a href="#">Home</a> 
         </li> 
         <li class="active">Dashboard</li> 
        </ul> 
     </div> 
     <hr/> 


       <div class="container-fluid"> 
        <div class="row"> 
         <div class="col-lg-12"> 
         <!--info box --> 
          <div class="row"> 
         <!--client panel --> 
         <div class="col-lg-3 col-md-6"> 
         <div class="info-box info-orange"> 
          <div class="info-left"> 
         <span>Demo1</span> 
         <h2>100</h2> 
        </div> 
        <div class="info-right"> 
         <i class="fa fa-institution fa-3x"></i> 
        </div> 
         </div> 
         </div> 

         <!--Student panel --> 
         <div class="col-lg-3 col-md-6"> 
         <div class="info-box info-sky"> 
          <div class="info-left"> 
         <span>Demo2</span> 
         <h2>500</h2> 
        </div> 
        <div class="info-right"> 
         <i class="fa fa-users fa-3x"></i> 
        </div> 
         </div> 
         </div> 


         <!--Message panel --> 
         <div class="col-lg-3 col-md-6 clerefix"> 
         <div class="info-box info-red"> 
          <div class="info-left"> 
         <span>Total Message</span> 
         <h2>200</h2> 
        </div> 
        <div class="info-right"> 
         <i class="fa fa-users fa-3x"></i> 
        </div> 
         </div> 
         </div> 

         <!--Message panel --> 
         <div class="col-lg-3 col-md-6"> 
         <div class="info-box info-green"> 
          <div class="info-left"> 
         <img src="images/admin.png" class="img-responsive img-circle"> 
        </div> 

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

        <!--info box --> 
          <div class="row"> 
          <div class="col-lg-12"> 
           <div class="panel panel-default"> 
           <div class="panel-heading"> 
            Demo Panel Heading 
           </div> 
           <div class="panel-body"> 
            panel body 
           </div> 
           </div> 
          </div> 
          </div> 
         </div> 
         <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
        </div> 
       </div> 
      </div> 
      <!-- /#page-content-wrapper --> 

    </div><!--//page wrapper--> 

https://jsfiddle.net/81t6a96j/

Answer 1

有一个充分的高度侧边栏，你必须把高度百分数表示的元素的所有家长，你可以在下面的例子中看到：

<html style="height:100%"> 
    <body style="height:100%"> 
     <div class="container-fluid" style="height:100%"> 
      <div class="row" style="height:100%"> 
       <div class="sidebar col-xs-4" style="height:100%"></div> 
       <div class="content col-xs-8"></div> 
      </div> 
     </div> 
    </body> 
</html> 

Answer 2

边栏的高度为100％，但是，当您向下滚动页面时，页面的高度变得超过100％。侧栏的高度不会增加以匹配页面的高度。因此，将侧边栏的位置属性更改为position:fixed。

#sidebar-wrapper { 
    z-index: 1000; 
    position: fixed; 
    left: 230px; 
.... 
} 

Updated Fiddle