내 CSS 그리드 항목 높이 백분율이 예상대로 작동하지 않는 이유는 무엇입니까?

CSS 그리드 요소의 높이 계산 문제

CSS에서 그리드 요소의 높이 속성이 때때로 예기치 않게 동작할 수 있습니다. 이는 예기치 않은 상위 ​​요소를 기준으로 백분율 기반 높이가 계산되기 때문에 발생할 수 있습니다.

사례 연구

다음 크기의 CSS 그리드 요소를 고려해보세요.

• 그리드 컨테이너: 높이: 100px;
• 그리드 항목: height: 200%;

그리드 항목은 컨테이너 높이의 두 배여야 하며, 초과하는 부분은 스크롤 막대로 숨겨야 합니다. 그러나 실제 결과는 스크롤바 없이 그리드 항목이 넘치고 있습니다.

원인 이해

자세히 살펴보면 높이 백분율이 스크롤바 없이 계산되고 있음을 알 수 있습니다. 그리드 항목의 상위 컨테이너가 아닌 그리드 항목의 하위 요소에 있습니다. 이는 그리드 항목이 컨테이너에서 두 수준 아래에 존재하고 중간 수준이 트랙이기 때문입니다.

해상도

이 문제를 해결하려면 두 항목의 높이가 모두 컨테이너와 컨테이너 내의 행은 고정된 값으로 설정되어야 합니다. 이 경우 컨테이너와 행은 모두 100px로 설정됩니다.

.gridContainer {
  height: 100px;
}

.gridContainer {
  grid-template-rows: 100px;
}

컨테이너와 행의 높이를 모두 정의하면 그리드 항목의 높이 백분율이 의도한 상위 항목을 기준으로 올바르게 계산될 수 있습니다. . 이렇게 하면 그리드 항목의 높이가 행 높이의 200%가 되어 스크롤 막대에 의해 오버플로가 숨겨지더라도 컨테이너 내에 들어갈 수 있습니다.

위 내용은 내 CSS 그리드 항목 높이 백분율이 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!