div 100% height with 40px bottom margin

[shangrila]

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/\[code\].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;}\[/code\]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/