Dúvida em Height 100%

HTML

<body onload="functs()">

  <div class="main">
    <h1> Testando </h1>

    <div class="side-bar" id="sideBar">

      <div class="side-top">
        <a href="#" id="changeMenu">
          <span class="glyphicon glyphicon-menu-hamburger pull-right"> </span> </a>
      </div>

      <div id="side-search">
        <form class="side-search" action="search.php" method="POST">
          <a href="#" class="submit"> <span class="glyphicon glyphicon-search"> </span> </a>
          <input type="text" class="side-searching" placeholder="Procurar..." onfocus="this.placeholder=''" onblur="this.placeholder='Procurar...'">
        </form>
      </div>

      <ul id="side-menu">
        <li>
          <a href="#" class="side-li">
            <span class="s-triangle glyphicon glyphicon-triangle-left"></span>
            <span class="s-icon glyphicon glyphicon-home"></span>
            <span class="side-li-title">Home</span>
          </a>
        </li>

        <li>
          <a href="#" class="collapse-trigger side-li">
            <span class="s-triangle glyphicon glyphicon-triangle-left"></span>
            <span class="s-icon glyphicon glyphicon-blackboard"></span>
            <span class="side-li-title">Avisos</span>
            <span class="g-icon glyphicon glyphicon-menu-left"> </span>
          </a>
          <div class="collapse-active">
            <a href="#"> Item </a>
            <a href="#"> Item </a>
          </div>
        </li>

        <li>
          <a href="#" class="collapse-trigger side-li">
            <span class="s-triangle glyphicon glyphicon-triangle-left"></span>
            <span class="s-icon glyphicon glyphicon-tags"></span>
            <span class="side-li-title">Produtos</span>
            <span class="g-icon glyphicon glyphicon-menu-left"> </span>
          </a>
          <div class="collapse-active">
            <a href="#"> Item </a>
            <a href="#"> Item </a>
            <a href="#"> Item </a>
          </div>
        </li>

       ...

CSS

/********************************	Side Bar Default 	****************************/

html {
  height: 100%;
}

body {
  height: 100%;
}

.main {
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
}

.side-bar {
  min-width: 285px;
  height: 100%;
  padding: 0px;
  margin: 0px;
  position: absolute;
  overflow: none;
  float: left;
  background: #3d3d3d;
  font-family: "Open Sans";
  font-style: red;
}

.side-bar .side-top {
  height: 40px;
  margin-top: 10px;
}

.side-bar .side-top span {
  margin-top: 2%;
  margin-right: 10%;
  padding: 5px;
  background: #262626;
  color: #737373;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.side-bar .side-top span:hover {
  background: #101010;
}

.side-bar .side-search {
  height: 25px;
  margin-top: 15px;
  width: 80%;
  border-bottom: 1px solid #7d7d7d;
  margin-left: 10%;
}

.side-bar .side-search span {
  color: #7d7d7d;
  right: -12%;
}

input.side-searching:focus {
  outline-width: 0;
  color: #7d7d7d;
}

.side-bar .side-search input.side-searching {
  background-color: #3d3d3d;
  border: none;
  width: 80%;
  float: left;
  padding: 0px;
}

ul#side-menu {
  margin: 0px;
  padding: 0px;
  font-family: "Open Sans";
  font-size: 14px;
  list-style: none;
  margin-top: 20px;
}

ul#side-menu a {
  display: block;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

ul#side-menu li {
  border-bottom: 1px solid #5c5c5c;
}

ul#side-menu li a.side-li {
  padding-left: 10%;
  height: 40px;
}

ul#side-menu li a:hover {
  background: #303030;
}

ul#side-menu .collapse-active {
  margin: 7px 0px;
}

ul#side-menu .collapse-active a {
  padding: 2% 0% 2% 22%;
  font-size: 13px;
  color: #f1f1f1;
}

ul#side-menu .collapse-active a:hover {
  background: #424242;
}

.changeColor {
  background: #303030;
}

ul#side-menu li a.side-li span.glyphicon {
  color: #969696;
}

ul#side-menu li a.side-li span.g-icon {
  float: right;
  right: 7%;
  font-size: 10px;
...

JavaScript

$(document).ready(function() {
  $(".collapse-active").hide();
  $(".collapse-trigger").click(function() {
    if ($(this).hasClass("collapse-trigger")) {
      $(this).toggleClass("changeColor");
    }
    $(this).next(".collapse-active").slideToggle(270);
    $(this).find('span.g-icon').toggleClass('glyphicon-menu-left glyphicon-menu-down');

  });
})