프로그램/html,css2012. 7. 12. 11:02

원하는 위치에 스크롤 바가 필요한 경우가 있다.

이럴 때 div 태그를 이용해서 스크롤바를 만들 수 있다.

 

예> 세로 스크롤바만 항상 사용하기

<div style="overflow-y:scroll;width:200px;height:100px;">http://okkks.tistory.com/914</div>

이 경우에는 가로 크기가 지정한 값보다 커지면 자동으로 가로 스크롤바가 생성된다.

커져도 가로 스크롤바를 사용하고 싶지 않다면 overflow-x:hidden;을 추가한다.

 

참고>지정한 세로 크기보다 적을 때는 세로 스크롤바를 생성하지 않고 클 때 세로 스크롤바만 자동으로 생성하기

(단, 지정한 가로크기보다 커져도 가로 스크롤바는 생성되지 않는다.)

<div style="overflow-y:auto;overflow-x:hidden;height:100px;">http://okkks.tistory.com/916</div>

참고> 가로 스크롤바만 항상 사용하기

<div style="overflow-x:scroll;width:200px;height:100px;">http://okkks.tistory.com/914</div>

참고>지정한 크기보다 커지면 자동으로 가로, 세로 스크롤바 생성하기

<div style="overflow:auto;width:200px;height:100px;">http://okkks.tistory.com/915</div>

참고>스크롤바를 항상 생성하기

overflow:scroll;

Posted by 은둔고수
프로그램/html,css2012. 4. 16. 15:02

 

ie7(익스플로러7)에서 overflow:hidden 이 안 먹히는 경우가 발생하면

overflow:hidden과 함께 position:relative를 같이 사용한다.

예>style="height:85px;position:relative;overflow:hidden;" 

Posted by 은둔고수
프로그램/html,css2009. 9. 5. 09:24


div를 이용해서 textarea 구현하기, div 스크롤 구현

[소스 예]
<div  style="width:393px; height:63px;font-size:12px; overflow:auto">안녕하세요. ^^<br/>
이 곳은 http://okkks.tistory.com 입니다.
</div>

설명>
div를 이용해서 textarea 태그처럼 만들기의 핵심은
overflow:auto
입니다. 스크롤이 자동으로 생깁니다.

- 스크롤 없애기
overflow:hidden

다만, 글 내용에서 다음 줄 처리(엔터)하는 부분은 내용에 <br />태크를 삽입을 해야 합니다. 

Posted by 은둔고수