Fixed Layer

Frame을 사용하지 않고 navigation이 고정된 채로 내용만 scroll되도록 만들어보자. FireFox라면 position:fixed를 사용할 수 있겠지만, IE가 지원하지 않기 때문에 cross-browing을 생각하여 javascript와 css를 이용하여 구현해 보겠다. 간단하게 left navigation과 content두 column으로 구성된 page를 생각해보자. css code snippet은 대략 다음과 같은 모습이다.

#leftnavigation {
  position : absolute;
  left : 0;
  width : 170px;
  margin-left : 10px;
  color : #000000;
  top : 0px;
}
#content {
  top : 0px;
  left : 180px;
  color : #000000;
  position:absolute;
  overflow: auto;
}
body{
  overflow: hidden;
}
 
* html body{
    background: #fff url(foo) fixed;
  }

여기서 눈여겨 볼 부분은 * html body부분이다. 이부분은 IE만 해석할 수 있는 데, 화면 떨림방지를 위한 hack이다. 자세한 것은 forum의 javascript관련 post를 참고하기 바란다.

다음은 javascript부분으로 이부분은 설명없어도 이해할 것으로 생각한다. setTimeout대신에 window.onresize = function(){ }을 사용하여도 무방하다. 아래가 관련 javascript code snippet이다.

function adjust(){
        var screenWidth=0;
		var screenHeight=0;
 
		if(window.innerWidth){    //FireFox, NN
			screenWidth = window.innerWidth;
			screenHeight = window.innerHeight;
		}else{    //IE
			if(document.compatMode && document.compatMode=='CSS1Compat'){	//Strict Mode
				screenWidth = documentElement.clientWidth;
				screenHeight = documentElement.clientHeight;
			}else{  //Quirks Mode
				screenWidth = document.body.clientWidth;
				screenHieght = document.body.clientHeight;
			}//end if~else
		}//end if~else
 
		var contentWidth = screenWidth - 180;
		if(contentWidth<0) contentWidth =0;
		if(screenHeight<0) screenHeight = 0;
 
		//set the content's width and height
		document.getElementById("content").style.width=contentWidth;
		document.getElementById("content").style.height=screenHeight;
 
		setTimeout("adjust()", 50);
	}//adjust