Properties

Properties

Editing
  • account_tree
  • bug_report

overflow-y

정해진 크기의 요소 내 콘텐츠가 넘치는 경우 세로 방향으로 어떻게 처리할 것인지를 설정한다.

사용 가능한 값 타입

<overflow>

DEVDIC-Specified Data Types

overflow-x, overflow-y, overflow 속성에 사용되는 값을 나타낸다.

  • CSS Overflow Module Level 3
    visible | hidden | clip | scroll | auto

사용되는 키워드

  • auto

    요소 밖으로 콘텐츠가 벗어나는 경우에만 스크롤이 가능하도록 하고 그렇지 않은 경우에는 스크롤 영역을 표시하지 않는다.

  • clip

    CSS Overflow Module Level 3

    overflow-clip-margin 속성에 의해 정의된 값에 따라 콘텐츠를 자르고 hidden 값과 다르게 프로그래밍 방식의 스크롤을 허용하지 않는다.

  • hidden

    요소 밖의 콘텐츠를 숨긴다.

  • scroll

    CSS Overflow Module Level 3

    요소 밖의 콘텐츠는 잘리지만 스크롤을 통해 보기를 허용한다. 그렇지 않은 경우에도 스크롤 영역이 표시된다. auto에 비해 가지는 장점은 동적인 처리를 통해 콘텐츠의 양을 예측할 수 없는 경우에 스크롤바가 나타나고 사라지는 문제를 해결할 수 있다. 대상 매체가 인쇄인 경우에는 밖으로 벗어난 내용이 인쇄될 수 있다.

  • visible

    요소 밖의 콘텐츠를 표시한다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 요소 밖의 콘텐츠를 표시한다.

  • 요소 밖으로 콘텐츠가 벗어나는 경우에만 스크롤이 가능하도록 하고 그렇지 않은 경우에는 스크롤 영역을 표시하지 않는다.

  • CSS Overflow Module Level 3

    overflow-clip-margin 속성에 의해 정의된 값에 따라 콘텐츠를 자르고 hidden 값과 다르게 프로그래밍 방식의 스크롤을 허용하지 않는다.

    Example
  • 요소 밖의 콘텐츠를 숨긴다.

  • CSS Overflow Module Level 3

    요소 밖의 콘텐츠는 잘리지만 스크롤을 통해 보기를 허용한다. 그렇지 않은 경우에도 스크롤 영역이 표시된다. auto에 비해 가지는 장점은 동적인 처리를 통해 콘텐츠의 양을 예측할 수 없는 경우에 스크롤바가 나타나고 사라지는 문제를 해결할 수 있다. 대상 매체가 인쇄인 경우에는 밖으로 벗어난 내용이 인쇄될 수 있다.

구문

  • overflow-y: auto;
    CSS Overflow Module Level 3
  • element.style.overflowY = "scroll";
    CSS Overflow Module Level 3

테스트 도구

overflow-y 속성에 대한 테스트

버전 명세

Modules
Module NameStatusSummary
CSS Overflow Module Level 3초안 작업

Last review date: 2022-10-20

지원 웹브라우저