CSS에서 세로 스크롤 Div를 만드는 방법은 무엇입니까?

CSS에서 세로 스크롤을 사용하여 Div 만들기

스크롤할 수 있는 div를 만들 때 오버플로 속성을 이해하는 것이 중요합니다. . 기본적으로 Overflow: auto는 콘텐츠가 div의 경계를 넘어 확장되도록 허용하고 가로 및 세로 축 모두에 대한 스크롤 막대를 만듭니다. 스크롤을 세로 축으로만 제한하려면 대신 Overflow-y를 사용해야 합니다.

Overflow-y: 스크롤

overflow-y 사용: 스크롤은 세로 축을 강제합니다. 콘텐츠가 div의 높이를 초과하는지 여부에 관계없이 스크롤 막대가 나타납니다. 이는 콘텐츠가 div 높이를 벗어나지 않더라도 세로 스크롤 막대가 항상 표시되도록 하려는 경우에 유용합니다.

Overflow-y: Auto

콘텐츠가 div 높이를 초과할 때만 세로 스크롤 막대가 나타나도록 하려면 Overflow-y:auto를 사용하세요. 이렇게 하면 콘텐츠가 div 끝에 도달하면 자동으로 다음 줄로 넘어가 가로 스크롤 막대가 나타나는 것을 방지할 수 있습니다. 그러나 콘텐츠가 div 높이를 초과하면 세로 스크롤바가 표시됩니다.

예제 코드

세로 스크롤만 가능한 div를 만들려면 다음 CSS:

<pre class="brush:php;toolbar:false">
div {
  overflow-y: auto;
  height: 400px;
}

이 코드는 콘텐츠가 div의 높이를 초과할 때 세로 스크롤을 허용하는 div를 생성합니다. 400px, 가로 스크롤을 방지합니다.

위 내용은 CSS에서 세로 스크롤 Div를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!