오버플로: 스크롤을 사용할 때 Firefox에서 하단 패딩이 사라지는 이유는 무엇입니까?

Overflow: Scroll이 포함된 Firefox의 패딩 문제

overflow: 스크롤을 사용하여 스크롤 가능한 요소를 구현할 때 Firefox에서 문제가 발생할 수 있습니다. 요소의 아래쪽 패딩은 무시됩니다. 이는 Chrome 및 Safari에서 패딩이 제대로 작동함에도 불구하고 관찰됩니다.

특정 시나리오에는 padding: /* ... */ 및 Overflow-y: 요소로 스크롤과 같은 CSS 속성을 적용하는 것이 포함됩니다. Firefox에서는 요소 하단의 패딩이 누락되었습니다.

해결 방법

이 문제는 Firefox에서는 버그로 보일 수 있지만 CSS를 사용하는 해결 방법이 있습니다. . 영향을 받는 요소에 다음 스타일을 추가하면 하단 패딩 문제를 해결할 수 있습니다.

.container:after {
    content: "";
    height: 50px;
    display: block;
}

이 CSS는 스크롤 가능한 컨테이너 뒤에 빈 요소를 생성하여 원하는 하단 패딩을 효과적으로 제공합니다. 원하는 패딩 양에 맞게 높이 값을 조정할 수 있습니다.

구현

제공되는 CSS 솔루션은 CSS 파일에 다음 코드를 추가하여 구현할 수 있습니다.

.container:after {
    content: "";
    height: 50px;
    display: block;
}

이 CSS는 문제의 영향을 받는 요소에 적용되어야 합니다.

위 내용은 오버플로: 스크롤을 사용할 때 Firefox에서 하단 패딩이 사라지는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!