Div `100%` height with `40px` bottom margin

I know something similar has been asked before here.

But it's a little different as it involves css transitions.

http://jsfiddle.net/fariskassim/rWNJN/4/

.panel{

width:inherit;
height: 0%;
display:block;
position: absolute;

background: #000;
opacity:0;
z-index: 2;

margin-top: 40px;
margin-right: 40px;
margin-left: 40px;
margin-bottom: 40px;

bottom:0;
top:0;
left:0;
right:0;

-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;

}

When the box is opened,

i'm trying to get the green box have a 40px on all sides from the browser perimeter, I've managed to do it for the left / right and top but bottom is a problem.

Any idea how do i fix this?

EDIT: at the same time, i still want the wipe in and out effect when opening and closing the box.

http://jsfiddle.net/fariskassim/rWNJN/4/