====== 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관련 [[http://ria-web.info/forum/post/2|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

{{keywords>fixed layer without frame}} ===== See the sample ===== fixed layer whitout frame ~~DISCUSSION~~