一つのページに複数ページ作成

こんにちは、お世話になっています。
今日は図を用意しました。

現在作成中のページの大まかなものになります。
仕組みとしてはheaderにあるボタンを押すと、それに対応するブロック要素(z-index:2と1の物)が表示されるというものになります。
この仕組みを使用し一ページ内に複数ページを作っています。

ここで、問題となったのがそれぞれのブロック要素によってheightが違うということでした、これによりz-index1で表したような図の下にある余白がz-index2を見た際生じます。
この点について、z-index2を見た際この余白が消えるようにしたいのですが、いい案が思いつきません。
よろしくお願いします。

<div id="newsHP" style="position:absolute; top:25px; opacity:0; z-index:1; width:100%; min-height:1562px; height:auto;">要素内容</div>

これが現在それぞれのブロック要素に指定しているcssです

	$(".NEWS").click(function(){
		setTimeout(function(){
			$('#navigation').animate({
				top:-50,
				opacity:0,
			},1000);
		},100);
		setTimeout(function(){
			$("ほかのブロック要素").animate({
				zIndex:1,
				opacity:0,
			},800);
		$("html,body").animate({scrollTop:0},'slow');
		},1100);
		setTimeout(function(){
			$("#newsHP").animate({
				opacity:1,
				zIndex:13,
			},900);
		},1900);
		setTimeout(function(){
			$('#navigation').animate({
				top:00,
				opacity:1,
			},1000);
		},2800);
	});

が具体的な変化させるJSファイルにないります。