Question

I have html code like this

<div id="wrapper">
  <div id="collapse"></div>
  <div id="content"></div>
</div>

the css code

#wrapper {
  width:100%;
  height: 100%;
}
#collapse {
  width:100%;
  height: 30%;
}
#content {
  width:100%;
  height: 70%;
}

what i want to ask is how to make the #content height fit the #wrapper when the #collapse is hidden (assuming there is a js script that make the #collapse show and hidden) ?

Answer 1

Try this:
HTML code:

<div id="main">
<div id="Example">Hello</div>
<button id="Toggle">Toggle</button>
<div id="body">This is Body!!!</div>
</div>  

JS code:

$('#Toggle').on('click', function() {
    $('#Example').slideToggle({
        duration: 1000,
        easing: 'easeOutCubic'
    });
});  

CSS code:

#Example {
    height: 100px;
    background: #cc0000;
}
#main{ height:500px;
background-color:yellow;}
#body{  height: 100%;
background-color:blue;}  

you can remove button and customize this code.
see this DEMO