Jay Jay - 1 month ago 18
CSS Question

Height 100% on a absolute positioned element

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

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