如何确定多级侧边栏响应的高度

时间：2018-11-23 09:56:16

标签： jquery html5 twitter-bootstrap css3 angular6

  

我有一个包含多级子菜单的侧边栏。当我展开菜单时，底部的内容/菜单不可见。我将高度保持在100％   由于我不断扩展子菜单，最后一个菜单没有显示。如果我扩展子菜单，最后一个菜单将完全隐藏。   请帮忙。   我该如何解决这个问题？

我的Jsfiddle Here 

/* nav-bar */

body {
  margin: 0;
  padding: 0;
  font-family: 'helvetica';
}

.navbar-color {
  width: 100%;
  box-shadow: 0px 0px 5px grey;
  top: 0;
  z-index: 3;
  background-color: #fff;
  height: 60px;
}

.navbar-brand {
  background-color: #fff;
}

.search-icon {
  color: grey;
  background-color: #fff;
  border-radius: 0 20px 20px 0;
  border: 1px solid #d3dbe2;
  border-left: 0px;
}

input.input-field {
  border-right: 0px;
  border-radius: 20px 0 0 20px;
  /* border-right: 0px; */
  border: 1px solid #d3dbe2;
}

.navbar-nav {
  padding-top: 5px;
}

.nav-item {
  padding: 0px 30px 0px 10px;
  margin: auto;
}

.navbar-toggle {
  border-color: #ddd;
}

.navbar-toggle .icon-bar {
  background-color: #888;
}

.nav-item a:hover {
  color: white;
  background-color: #19659d !important;
}

@media (min-width: 768px) and (max-width: 960px) {
  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-collapse.collapse.in {
    display: block !important;
  }
  .navbar-header .collapse,
  .navbar-toggle {
    display: block !important;
  }
  .navbar-header {
    float: none;
  }
}


/* navbar ends */

@media (max-width: 960px) {
  .brand {
    display: none !important;
  }
}

.nav-side-menu {
  overflow: auto;
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 200;
  background-color: #2e353d;
  position: fixed;
  top: 0px;
  width: 300px;
  height: 100%;
  color: #e1ffff;
  margin-top: 61px;
  z-index: 100;
}

.nav-side-menu .brand {
  background-color: #23282e;
  line-height: 50px;
  display: block;
  text-align: center;
  font-size: 14px;
}

.nav-side-menu .toggle-btn {
  display: none;
}

.nav-side-menu ul,
.nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 35px;
  cursor: pointer;
}

.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
  font-family: FontAwesome;
  content: "\f078";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: right;
}

.nav-side-menu ul .active,
.nav-side-menu li .active {
  /*   border-left: 3px solid #d19b3d;
   */
  background-color: #4f5b69;
}


/* .nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
  color: #d19b3d;
} */


/* .nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
  color: #d19b3d;
} */

.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
  background-color: #181c20;
  border: none;
  line-height: 28px;
  border-bottom: 1px solid #23282e;
  margin-left: 0px;
}

.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
  background-color: #020203;
}

.nav-side-menu ul .sub-menu li.main.collapsed:before {
  font-family: FontAwesome;
  content: "\f067";
  display: inline-block;
  padding-left: 8px;
  padding-right: 8px;
  vertical-align: middle;
}

.nav-side-menu ul .sub-menu li.main:before {
  font-family: FontAwesome;
  content: "\f068";
  display: inline-block;
  padding-left: 8px;
  padding-right: 8px;
  vertical-align: middle;
}

.collapsed.sub-main:before {
  font-family: FontAwesome;
  content: "\f067";
  display: inline-block;
  margin-left: 28px;
}

.sub-main:before {
  content: "\f068";
  font-family: FontAwesome;
  display: inline-block;
  margin-left: 28px;
}

.sub-main a.child {
  margin-left: -27px;
}


/* .sub-main a.child{
  margin-left:-27px;height
  
} */


/* .sub-main .child-sub a.child{
margin-left:59px;
  
} */

.nav-side-menu ul.sub-menu a.child {
  padding-left: 3.8rem
}

.nav-side-menu ul.sub-menu .child-sub~a.child {
  padding-left: 5.8rem;
  margin-left: 30px;
}

.sub-main+.child-sub a.child {
  margin-left: 33px;
}

.sub-main+#intro~li a.child {
  margin-left: 11px;
}

.nav-sdemenu .main+ul.sub-menu .child-sub~li a.child {
  padding-left: 49px;
}


/* .nav-side-menu ul .sub-menu li.main  l{
  padding-left:33px
} */

.nav-side-menu li {
  padding-left: 0px;
  border-left: 3px solid #2e353d;
  border-bottom: 1px solid #23282e;
}

.nav-side-menu li a {
  text-decoration: none;
  color: #e1ffff;
}

.nav-side-menu li a i {
  padding-left: 10px;
  width: 20px;
  padding-right: 20px;
}

.nav-side-menu li:hover {
  border-left: 3px solid #d19b3d;
  background-color: #4f5b69;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

@media (max-width: 960px) {
  .nav-side-menu {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
  }
  /* .nav-side-menu .toggle-btn {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10 !important;
    padding: 3px;
    background-color: #ffffff;
    color: #000;
    width: 40px;
    text-align: center;
  } */
  .brand {
    display: none !important;
  }
}

@media (min-width: 960px) {
  .nav-side-menu .menu-list .menu-content {
    display: block;
  }
}

body {
  margin: 0px;
  padding: 0px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <!------ Include the above in your HEAD tag ---------->

  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>

  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <!------ Include the above in your HEAD tag ---------->

  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

  <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed-top navbar-color ">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-content">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
        <a class="navbar-brand" href="#">LOGO</a>

      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li class="nav-item"><a routerLink="/TroubleLogin">Trouble Logging in?</a></li>
          <li class="nav-item"><a href="#">Home</a></li>
          <li class="nav-item"><a href="#">About us</a></li>
          <li class="nav-item"><a href="#">Contact</a></li>
        </ul>
        <form class="navbar-form navbar-right" action="/action_page.php">
          <div class="input-group">
            <input type="text" class="form-control input-field" placeholder="Search" style="border-right: 0px;">
            <span class="input-group-btn">
                  <button class="btn btn-default search-icon" type="submit">
                        <i class="fa fa-search"></i>
                  </button>
                    </span>
          </div>
        </form>


      </div>


    </div>
  </nav>

  <div class="nav-side-menu">
    <div class="brand">Content</div>
    <!-- <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> -->

    <div class="menu-list">

      <ul id="menu-content" class="menu-content collapse out">


        <li data-toggle="collapse" data-target="#products" class="collapsed ">
          <a routerLink="#">Common</a><span class="arrow"></span></li>

        <ul class="sub-menu collapse" id="products">
          <li class="main collapsed" data-toggle="collapse" data-target="#getting">
            <a routerLink="/Apollo/GS-index">started </a></li>
          <ul class="sub-menu collapse" id="getting">
            <li class="child sub-main collapsed" data-toggle="collapse" data-target="#intro"><a class="child" routerLink="/Apollo/GS-intro">Introduction</a></li>

            <ul id="intro" class="child-sub collapse">
              <li><a class="child" routerLink="/Apollo/GS-PF">AB1</a></li>
              <li><a class="child" routerLink="/Apollo/GS-SF">AB2</a></li>
            </ul>
            <li><a class="child" routerLink="/Apollo/GS-PR">AB3</a></li>
            <li><a class="child" routerLink="/Apollo/GS-dc">AB4</a></li>
            <li><a class="child" routerLink="/Apollo/GS-Navi">AB5</a></li>
          </ul>



          <li class="main collapsed" data-toggle="collapse" data-target="#manage">
            <a routerLink="#">Man</a></li>
          <ul class="sub-menu collapse" id="manage">
            <li><a class="child" routerLink="#">M1</a></li>
            <li><a class="child" routerLink="#">M1</a></li>
            <li><a class="child" routerLink="3">M1</a></li>
            <li><a class="child" routerLink="#">M1</a></li>
            <li><a class="child" routerLink="#">M1</a></li>
            <li><a class="child" routerLink="#">Create roup</a></li>
            <li><a class="child" routerLink="R">M1</a></li>
            <li><a class="child" routerLink="#">M1</a></li>
            <li><a class="child" routerLink="#">m2es</a></li>
            <li><a class="child" routerLink="#">m2ess</a></li>
            <li><a class="child" routerLink="#">Cream2es</a></li>
          </ul>


          <li data-toggle="collapse" data-target="#rfi" class="main collapsed">
            <a routerLink="#">for</a></li>
          <ul class="sub-menu collapse" id="rfi">
            <li><a class="child" routerLink="#">Ab</a></li>
            <li><a class="child" routerLink="#">Ab2</a></li>
            <li><a class="child" routerLink="#">Ab3</a></li>
            <li><a class="child" routerLink="#">Ab4</a></li>
            <li><a class="child" routerLink="/#">Ab5</a></li>
            <li><a class="child" routerLink="#">AAb6</a></li>
            <li><a class="child" routerLink="#">Ab66</a></li>
            <li><a class="child" routerLink="#">Ab7</a></li>
            <li><a class="child" routerLink="#"> you8</a></li>
          </ul>


          <li data-toggle="collapse" data-target="#RI" class="main collapsed">
            <a routerLink="#">Tasks</a></li>
          <ul class="sub-menu collapse" id="RI">
            <li><a class="child" routerLink="#">Add a Task </a></li>
            <li><a class="child" routerLink="/#">Views</a></li>
            <li><a class="child" routerLink="#">Edit</a></li>
            <li><a class="child" routerLink="#">Close</a></li>
            <li><a class="child" routerLink="/#ssign">Viewr</a></li>
          </ul>

          <li data-toggle="collapse" data-target="#observation" class="main collapsed">
            <a routerLink="#">Order</a></li>
          <ul class="sub-menu collapse" id="observation">
            <li><a class="child" routerLink="#">Create order</a></li>
            <li><a class="child" routerLink="#">View Order</a></li>
            <li><a class="child" routerLink="#">Edit Order</a></li>
            <li><a class="child" routerLink="#">AddOrder</a></li>
            <li><a class="child" routerLink="#">Reply to Order</a></li>
            <li><a class="child" routerLink="#">Change tOrder</a></li>
            <li><a class="child" routerLink="#">CloseOrder</a></li>
            <li><a class="child" routerLink="#">View Order User</a></li>
          </ul>



          <li data-toggle="collapse" data-target="#inspection" class="main collapsed">
            <a routerLink="#">permit</a></li>
          <ul class="sub-menu collapse" id="inspection">
            <li><a class="child" routerLink="#">Create permit</a></li>
            <li><a class="child" routerLink="#">View permits</a></li>
            <li><a class="child" routerLink="#">Fillpermit</a></li>
            <li><a class="child" routerLink="#">Edit apermit</a></li>
            <li><a class="child" routerLink="#">Add permit</a></li>
            <li><a class="child" routerLink="#">Close permit</a></li>
            <li><a class="child" routerLink="#">Assigned permit</a></li>
          </ul>

          <li data-toggle="collapse" data-target="#submittals" class="main collapsed">
            <a routerLink="#">Subjects</a></li>
          <ul class="sub-menu collapse" id="submittals">
            <li><a class="child" routerLink="#">Create Subjects</a></li>
            <li><a class="child" routerLink="#">Create a New Subjects</a></li>
            <li><a class="child" routerLink="#">View Subjects</a></li>
            <li><a class="child" routerLink="#">Edit Subjects</a></li>
            <li><a class="child" routerLink="#">Add/Edit Subjects</a></li>
            <li><a class="child" routerLink="#">Respond to Subjects</a></li>
            <li><a class="child" routerLink="#">Merge Subjects</a></li>
            <li><a class="child" routerLink="#">Close Subjects</a></li>
            <li><a class="child" routerLink="#">Subjects Submittals</a></li>
            <li><a class="child" routerLink="#">Delete Subjects</a></li>
            <li><a class="child" routerLink="#">Create reSubjects</a></li>
            <li><a class="child" routerLink="#">View sub</a></li>
          </ul>

          <li data-toggle="collapse" data-target="#safety" class="main collapsed">
            <a routerLink="#">Safety</a></li>
          <ul class="sub-menu collapse" id="safety">
            <li><a class="child" routerLink="#">CreateSafety</a></li>
            <li><a class="child" routerLink="#">View Safety</a></li>
            <li><a class="child" routerLink="#">Edit Safety</a></li>
            <li><a class="child" routerLink="#">Add Safetyt</a></li>
            <li><a class="child" routerLink="#">Add Safety</a></li>
            <li><a class="child" routerLink="#">Respond Safety</a></li>
            <li><a class="child" routerLink="#">CloseSafety</a></li>
            <li><a class="child" routerLink="3">Reopen Safety</a></li>
          </ul>

          <li data-toggle="collapse" data-target="#photos" class="main collapsed">
            <a routerLink="#">Photos</a></li>
          <ul class="sub-menu collapse" id="photos">
            <li><a class="child" routerLink="#">Create Photo Albums</a></li>
            <li><a class="child" routerLink="#">Upload Photos</a></li>
            <li><a class="child" routerLink="/#-download">Download Photos</a></li>
            <li><a class="child" routerLink="#">Delete Photos</a></li>
            <li><a class="child" routerLink="#">View/Edit Description for Photos</a></li>
            <li><a class="child" routerLink="#">Move photos Between Albums</a></li>
            <li><a class="child" routerLink="#">View Deleted Photos and Photos Albums</a></li>
          </ul>


          <li data-toggle="collapse" data-target="#docs" class="main collapsed">
            <a routerLink="#">demo</a></li>
          <ul class="sub-menu collapse" id="docs">
            <li><a class="child" routerLink="#">dummy1</a></li>
            <li><a class="child" routerLink="#">dummy1</a></li>
            <li><a class="child" routerLink="#">dummy1</a></li>
            <li><a class="child" routerLink="#">dummy1</a></li>
            <li><a class="child" routerLink="#">dummy1</a></li>
            <li><a class="child" routerLink="#">dummy1</a></li>
            <li><a class="child" routerLink="#">dummy1</a></li>
            <li><a class="child" routerLink="#">dummy1s</a></li>
            <li><a class="child" routerLink="#">dummy1</a></li>
            <li><a class="child" routerLink="#">dummy1</a></li>
            <li><a class="child" routerLink="#">dummy1</a></li>
          </ul>




          <li data-toggle="collapse" data-target="#drawing" class="main collapsed">
            <a routerLink="#">Drawings</a></li>
          <ul class="sub-menu collapse" id="drawing">
            <li><a class="child" routerLink="#">D1</a></li>
            <li><a class="child" routerLink="#">D2</a></li>
            <li><a class="child" routerLink="#">D2</a></li>
            <li><a class="child" routerLink="#">D2</a></li>
            <li><a class="child" routerLink="#">D2</a></li>
            <li><a class="child" routerLink="#">D2</a></li>
            <li><a class="child" routerLink="#p">D2</a></li>
            <li><a class="child" routerLink="#">D2</a></li>
            <li><a class="child" routerLink="#">D2</a></li>
            <li><a class="child" routerLink="#">D2</a></li>
            <li><a class="child" routerLink="#">D2</a></li>
            <li><a class="child" routerLink="#">D2</a></li>
          </ul>


          <li data-toggle="collapse" data-target="#spec" class="main collapsed">
            <a routerLink="#">Spec</a></li>
          <ul class="sub-menu collapse" id="spec">
            <li><a class="child" routerLink="#">Spec1</a></li>
            <li><a class="child" routerLink="#">Spec2</a></li>
            <li><a class="child" routerLink="#">Spec3</a></li>
            <li><a class="child" routerLink="#">Spec4</a></li>
            <li><a class="child" routerLink="#">Spec5</a></li>
            <li><a class="child" routerLink="#">Spec6</a></li>
            <li><a class="child" routerLink="#">Spec7</a></li>
            <li><a class="child" routerLink="#">Spec8</a></li>
            <li><a class="child" routerLink="#">Spec8</a></li>
          </ul>


          <li data-toggle="collapse" data-target="#daily" class="main collapsed">
            <a routerLink="#">Daily</a></li>
          <ul class="sub-menu collapse" id="daily">
            <li><a class="child" routerLink="#">Fill Daily s</a></li>
            <li><a class="child" routerLink="#">Edit / Delete Daily</a></li>
            <li><a class="child" routerLink="#">Daily Reports</a></li>
          </ul>

          <li data-toggle="collapse" data-target="#video" class="main collapsed">
            <a routerLink="#">Tutorials</a></li>
          <ul class="sub-menu collapse" id="video">
            <li><a class="child" routerLink="#">Users</a></li>
            <li><a class="child" routerLink="#">Admin</a></li>
            <li><a class="child" routerLink="#">emp</a></li>
          </ul>

        </ul>


        <li data-toggle="collapse" data-target="#Mobile" class="main">
          <a routerLink="/Apollo#">Mobile<span class="arrow"></span></a>
        </li>
        <ul class="sub-menu collapse" id="Mobile">
          <li>Mobile 1</li>
          <li>Mobile 2</li>
          <li>Mobile 3</li>
        </ul>


        <li data-toggle="collapse" data-target="#Bug" class="main">
          <a routerLink="#">topicsg<span class="arrow"></span></a>
        </li>
        <ul class="sub-menu collapse" id="Bug">
          <li>topics 1</li>
          <li>topics 2</li>
          <li>topics 3</li>
        </ul>

        <li data-toggle="collapse" data-target="#schlor" class="main">
          <a routerLink="#">Schmain<span class="arrow"></span></a>
        </li>
        <ul class="sub-menu collapse" id="schlor">
          <li>main 1</li>
          <li>main 2</li>
          <li>main 3</li>
        </ul>


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







</body>

</html>

1 个答案:

答案 0 :(得分：0)

您必须在CSS中添加以下代码：

.nav-side-menu {
  height: -webkit-calc(100% - 61px);
  height: -moz-calc(100% - 61px);
  height: -ms-calc(100% - 61px);
  height: calc(100% - 61px);
}
相关问题
最新问题