Height 100% on a absolute positioned element - html

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>TESTIMONIALS</li>
<li>ARCHIVES</li>
<li>FAQS</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');
}
});
});