[Html] 스크롤바 유무에 따라 레이아웃이 흐트러질 경우

일반적으로 블로그 등의 웹페이지 레이아웃으로 가운데 정렬이 많이 쓰인다. 이렇게 가운데 정렬을 하기 위해서는 CSS style 에서 다음과 같은 코드를 사용한다.

#container { 
        margin:0 auto; 
}

그런데 페이지의 내용이 길어지면 브라우저에 세로 스크롤바가 만들어지는데, 이 때 스크롤바가 차지하는 공간 때문에 가운데 정렬된 레이아웃이 약간 위치를 이동하는 현상이 발생한다. 즉, 내용이 짧은 페이지 (=스크롤바가 없는 페이지) 와 내용이 긴 페이지 (=스크롤바가 있는 페이지) 를 전환할 때 레이아웃이 미세하게 좌우로 움직이는 현상을 보이게 된다. 이를 해결하기 위한 한가지 방법은 항상 브라우저에 스크롤바를 표시하도록 하는 것이다. 이를 위해서 body 태그에 다음 스타일을 추가한다.

body { 
        overflow-y:scroll; 
}

이렇게 하면 페이지의 내용에 상관없이 항상 스크롤바가 표시되며, 이전과 같이 페이지 전환에 따른 레이아웃 변화를 방지할 수 있다.

다만, 한가지 부작용이 발생하는데 IE8 에서 호환성보기 모드로 페이지를 표시할 때 

스크롤바가 두 개로 표시되는 문제 

가 있다.

 

========================

 

ie8은 보통땐 스크롤 바가 없다가 긴문서일때만 스크롤바가 생깁니다.

 

이로 인해 중앙중렬 레이아웃의 경우 문서길이에 따라 레이아웃이 움직이게 됩니다.

 

이럴땐 css 핵을 사용해서 세로스크롤 고정하면 됩니다.

 

 

?

1	html>/**/body { overflow-y:scroll; }

 

 

위 핵은 IE7 이하 브라우저에서 스크롤바가 이중으로 생기는걸 방지해 줍니다.

 

 

출처 : 사이트 사라짐