CSS3 画面の高さを小さくしたときfooterを非表示にする

今回は、screenは画面にかかわることだけ。印刷には影響したくないので、@media screenを指定します。
() and ()のandの後の半角スペースをくっつけちゃうと動かなくなります。
↓400pxより小さくした時にfooterが消えます。

@media screen and (max-height:400px){
　　footer{display:none;}
}

↓徐々に変化させたいなら、変化前と変化後のアイテムを用意します。
@ ノーマル　ただのフッター
a:hover　ホバー　　メディアクエリで用意したフッター

transitionで不透明度をコントロールする。

-------------------------------------
footer {
	position:fixed;/*footerを固定*/
	bottom:0px;/*下の部分から0pxの位置に*/
	width:960px;/*幅が100%にしたら、body960pxの中に納まっているはずだが、左OKだが、右側は、はみ出してしまう。*/
	height:200px;
	font-family:Verdana, sans-serif;
	color:rgb(255,255,255);
	background-color:hsla(240,100%,50%,0.9);
	opacity:0.9;/*最初若干薄くします。*/
}
@media screen and (max-height:400px){
	footer{
		/*display:none; ぱっと消える*/
		/*すっと消したいので変更。IEではすっと消えますが、クロムなどはZ-indexでhederなどにのったときはぱっと消えてしまうので、アニメーションでやらないと駄目かもしれません・・・*/
		opacity:0;
		transition-property:opacity;/*対象（opacity）の値を変化させる。カンマで区切って複数指定可能。*/
		transition-duration:2s;/*実行時間：2秒間かけて変更*/
		
	}
}

※opacity:は中に入っている要素全てを透明にしてしまいます。
※fixdをすると前面になります。透明にしただけなので、レイヤーとして上にのっていますので下にあるリンクとかが触れなくなります。なので重ね順を変更します。
※兄弟でも後から書いた、ラストチャイルドの方が上に出てきます。
　z-index
※兄弟どおしだとデフォルトで1になっています。
なので、高さが400以下になった時に、hederとbodyのz-indexを変更します。
※z-indexを使用したい場合は、position:relativeをつけてあげる必要があります。
　今回はbodyとhederに2をつけます。