div에 스크롤이 생기게 하자

왼쪽에 보이는 화면은 스타일시트를 이용해서 <div> 태그에 스크롤이 생기게 한 화면이다.

 

팝업창 등 고정된 영역에서 <iFrame>등을 사용하지 않고 긴 내용을 뿌려주고자 할때 사용하면 편하고, 보여주기도 좋다.

 

아래는 왼쪽에 보이는 화면의 소스이다. 붉은색 스타일시트 속성을 유심히 보자.

 

--[Source]---------------------------------------------------------------------------------------------

<div style="overflow-y:scroll; width:300px; height:150px; padding:4px; border:1 solid #000000;">
      Div에 스크롤 생기게 하기<br><br><br><br><br><br><br>

     <br><br><br><br><br><br><br><br>

</div>

---------------------------------------------------------------------------------------------------------

 

※ 스타일시트의 OverFlow 속성

 

1) overFlow : visible

레이어 속의 내용이 레이어의 크기를 넘을 경우, 레이어 크기를 키워서 보여준다. (default 설정 값)

2) overFlow : hidden

레이어 속의 내용이 레이어의 크기를 넘을 경우, 레이어 크기만큼만 보여준다.

3) overFlow : auto

레이어 속의 내용이 레이어의 크기를 넘을 경우, 내용에 따라 자동으로 스크롤을 만든다.

4) overFlow : scroll

레이어 속의 내용의 길이와 상관없이 무조건 스크롤을 만든다.

 

* X, Y에 대해 다르게 적용하고자 할 때에는

overFlow-x : scroll, overFlow-y : scroll

와 같이 적용한다.

[출처] div에 스크롤이 생기게 하자|작성자 다찌