Height 100% on a absolute positioned element

Question

I was trying to make navigation bar of a demo present here http://www.templatemonster.com/demo/51129.html
HTML :

  <div class="main-container">
      <div class="top-nav-wrap">
        <div class="top-nav">
          <ul>
          <li class="border"><a href="#" >HOME</a></li>
          <li class="border submenu"><a href="#" >BLOG</a>
            <div class="submenu-wrap">
              <ul class="submenu-1">
              <li><a href="#">TESTIMONIALS</a></li>
              <li><a href="#">ARCHIVES</a></li>
              <li><a href="#">FAQS</a></li>

            </ul>
          </div>
          </li>
          <li class="border"><a href="#" >SERVICES</a></li>
          <li class="border"><a href="#" >OUR GALLERY</a></li>
          <li class="border"><a href="#" >CONTACTS</a></li>
        </ul>
      </div>
      </div>
      <div class="top-container">

      </div>
    </div>

CSS:

* {
  margin: 0;
  padding: 0;
}
body {
  background-image: url(../images/header-img.jpg);
  font-family: 'Roboto Condensed', sans-serif;
  height: 1900px;
}
.top-container {

  overflow: hidden;
}
.top-nav-wrap {
  width: 100%;

}
div.top-nav-scrolled.top-nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  background: white;
}
.top-nav {

  width: 1200px;
  margin: auto;
  /*overflow: hidden;*/
}

.top-nav ul {
  /*overflow: hidden;*/
  list-style: none;

}
.top-nav ul li {
  position: relative;
  float: left;
  padding-top: 30px;
  margin-left: 50px;
  padding-bottom: 10px;

}
.top-nav ul li:first-child {
  margin-left: 0;
}

.top-nav li a {

  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1px;
  color: #ba4b07;
}
.top-nav li.border::before {
  position: absolute;
  left: -25px;
  content: '\\';
  font-size: 20px;
  color: #ba4b07;
}

.top-nav li.border:first-child::before {
  content: '';
}
.top-nav li.border> a::after {
  position: absolute;
  top: -30px;
  left: 0;
  content: '';
  display: block;
  width: 100%;
  height: 20px;
  background:  #ba4b07;
  transition: all 0.3s ease;
}
.top-nav li.border a.hoverNav::after {
  top:0px;
}


.submenu-wrap {
  height: 0px;
  position: absolute;
  top: 100%;
  overflow: hidden;
  transition: all 0.3s ease;

}
.submenu:hover > div {
  height: 100%;
}
ul.submenu-1 {
  width: 300px;
  padding-top: 15px;
  padding-bottom: 30px;

  background:#ba4b07;
}
ul.submenu-1 li{
  padding: 0px;
  float: none;
  margin: 0;
}
ul.submenu-1 li a {
  display: block;
  padding: 20px;
  color: white;
  font-size: 1em;
}

ul.submenu-1 li:hover {
  background: white;
}
ul.submenu-1 li:hover a {
  color: #ba4b07;
}

Js:

$(function(){

  $('.top-nav ul li a').on('mouseover',function(){
    $(this).addClass('hoverNav');
  }).on('mouseout',function(){
    $(this).removeClass('hoverNav');
  });

  $(window).on('scroll',function(){
    $('.top-nav-wrap').addClass('top-nav-scrolled');
    if($(window).scrollTop()==0){
      $('.top-nav-wrap').removeClass('top-nav-scrolled');
    }

  });



});

The problem over here is .submenu:hover > div having height:100%; . I saw many answers over here regarding height 100% but was not able to understand.
height:100% over here is taking only some part of the whole div and not the full.
I could have used hardcoded pixels but all my submenus are of different size and using the same class. EDIT : Moreover using height:auto wont let my css transition to work. and same with using max-height.
I want my css transition to stay.

Answer 1

Change your sub-menu to height:auto , thus it calculates height according to the child elements present inside, as below.

Update to achieve height transition , you could try something as below, still height will be auto , but could transit using inner elements .

 .submenu:hover >.submenu-wrap {
   height:auto;
 }
.submenu:hover >.submenu-wrap> ul.submenu-1 {
  padding-top: 15px;
  padding-bottom: 30px;
 }
.submenu:hover >.submenu-wrap> ul.submenu-1 li a {
    padding-top: 20px;
    padding-bottom: 20px;
 }

Check updated jsFiddle

Answer 2

You can use this code it may help you.

CSS

* {
  margin: 0;
  padding: 0;
}
body {
  background-image: url(../images/header-img.jpg);
  font-family: 'Roboto Condensed', sans-serif;
  height: 1900px;
}
.top-container {

  overflow: hidden;
}
.top-nav-wrap {
  width: 100%;

}
div.top-nav-scrolled.top-nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  background: white;
}
.top-nav {

  width: 1200px;
  margin: auto;
  /*overflow: hidden;*/
}

.top-nav ul {
  /*overflow: hidden;*/
  list-style: none;

}
.top-nav ul li {
  position: relative;
  float: left;
  padding-top: 30px;
  margin-left: 50px;
  padding-bottom: 10px;

}
.top-nav ul li:first-child {
  margin-left: 0;
}

.top-nav li a {

  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1px;
  color: #ba4b07;
}
.top-nav li.border::before {
  position: absolute;
  left: -25px;
  content: '\\';
  font-size: 20px;
  color: #ba4b07;
}

.top-nav li.border:first-child::before {
  content: '';
}
.top-nav li.border> a::after {
  position: absolute;
  top: -30px;
  left: 0;
  content: '';
  display: block;
  width: 100%;
  height: 20px;
  background:  #ba4b07;
  transition: all 0.3s ease;
}
.top-nav li.border a.hoverNav::after {
  top:0px;
}


.submenu-wrap {
  /*height: 0px;*/
  position: absolute;
  top: 100%;
  overflow: hidden;
  /*transition: all 0.3s ease;*/
  display: none;

}
.submenu:hover > div {
 /* height: 100%;*/

}
ul.submenu-1 {
  width: 300px;
  padding-top: 15px;
  padding-bottom: 30px;

  background:#ba4b07;
}
ul.submenu-1 li{
  padding: 0px;
  float: none;
  margin: 0;
}
ul.submenu-1 li a {
  display: block;
  padding: 20px;
  color: white;
  font-size: 1em;
}

ul.submenu-1 li:hover {
  background: white;
}
ul.submenu-1 li:hover a {
  color: #ba4b07;
}

JS

$(function(){

  $(".top-nav ul li").hover(function(){
    $(this).find(".submenu-wrap").slideToggle();
  });


 $('.top-nav ul li').on('mouseover',function(){
    $(this).children().addClass('hoverNav');
  }).on('mouseout',function(){
     $(this).children().removeClass('hoverNav');
  });

  $(window).on('scroll',function(){
    $('.top-nav-wrap').addClass('top-nav-scrolled');
    if($(window).scrollTop()==0){
      $('.top-nav-wrap').removeClass('top-nav-scrolled');
    }

  });
});