堆棧內存溢出
  簡體   English   中英

如何在引導程序中將左側邊欄全高

[英]How to full height left sidebar in bootstrap

 原文  2016-01-30 11:12:48  7   2    jquery/ html/ css/ twitter-bootstrap

問題描述

我創建了一個管理儀表板面板，其中存在可折疊的左側邊欄。 但是問題是，如果我滾動窗口的左側邊欄不是全高。 我已將包裝紙和身體的最小高度設置為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/

2 個解決方案

解決方案1
 1  

邊欄的高度為100％，但是，當您向下滾動頁面時，頁面的高度將超過100％。 側邊欄的高度不會增加以匹配頁面的高度。 因此，將側邊欄的position屬性更改為position:fixed 。 

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

更新小提琴

解決方案2
 -1  2016-01-30 11:19:43

要具有完整的高度側邊欄，必須為元素的所有父級放置一個以百分比為單位的高度，如以下示例所示： 

<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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 在引導程序中具有頁腳的全高側欄 左側雙側邊欄+ Bootstrap 3 Bootstrap 3粘性左側邊欄 Bootstrap左側邊欄切換菜單 如何在Bootstrap 4中實現全高列 完整的減價高度 側邊欄全高，位於頁腳頂部 為什么左側邊欄的高度沒有變化？ 如何在li元素中添加全高度的左邊框？ 如何對齊左側和全高側導航菜單
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM