Expanding box to match top and bottom div bar height

JavaScript
1

http://www.jjtans.com/www/jquerythis is my current animation. The elements are animating independently. I am trying to figure out how to get the top and bottom of the black box to match the top and bottom green bars. So when animating it fills the space between the green bars, black. Any ideas? Thank you

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge" />
<title>danelian designs</title>
<script src="js/jquery-1.4.3.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$('#article').click(
function()
{
$('#register').animate({"top": "10%"}, 1000);
$('#message').animate({"top": "90%"}, 1000);
var regHeight = $('#register').height();

$("#content").show().animate({"height": "600px", "top": "15%"}, 1000);
***

});
});

</script>

<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<header>

</header>

<article id="article">

<div id = "register">
<p>top bar</p><div id="content">
</div>
</div>




<div id = "message">

<p><strong>jQuery</strong> Will this work?<a href="/special/">Best keep trying</a></p>
</div>
</article>



</body>
</html>
*