Setting display:none div inside div still takes up space

Setting display:none div inside div still takes up space

I have a main div contains two divs (one for heading and other for
content). the main div is placed at the bottom of the html page with
absolute positioning. When I hide content div, it sill takes up space in
the bottom of the page.
I need to show only the header div to do a jquery toggle..
<div class="tll">
<div class="tllH">
</div>
<div class="tllC">
</div>
</div>
<style>
.tll{
background: yellow;
height: 100px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.tllH{
background: green;
height: 20px;
width: 100%;
}
.tllC{
background: magenta;
height: 80px;
width: 100%;
display: none;
}
</style>