CSS를 사용하여 DIV 요소가 표 셀의 전체 너비와 높이를 채우도록 하려면 어떻게 해야 합니까?

CSS를 사용하여 표 셀에서 전체 너비 및 높이 DIV 달성

이 질문은 수년 동안 해결되지 않은 채 지속되었습니다. 그러나 CSS3를 사용하면 과제를 다시 검토하고 DIV를 확장하여 테이블 셀의 전체 너비와 높이를 채우는 방법을 탐색할 수 있습니다.

문제의 핵심은 셀 크기의 동적 특성에 있으며 100% 값의 제한된 응답성. 이를 극복하기 위해 해결책에는 영리한 트릭이 포함됩니다.

먼저 테이블 행에 0이 아닌 높이(예: 1px)를 할당합니다. 이 트릭은 브라우저의 행 높이 인식을 트리거하여 후속 제어를 가능하게 합니다.

다음으로 DIV 높이를 100%로 설정합니다. 이제 설정된 행 높이에 상대적이 됩니다. 이렇게 하면 DIV가 동적으로 확장되어 셀을 세로로 채울 수 있습니다.

DIV의 너비를 일치시키기 위해 CSS를 사용하여 셀의 너비를 명시적으로 지정하거나 내용에 따라 자동으로 크기를 조정할 수 있습니다.

이를 적용하면 규칙은 초기 값이나 동적 값에 관계없이 DIV가 전체 테이블 셀의 크기를 채우도록 보장합니다.

다음은 CSS 예시입니다. 일부 내용:

table {
  width: 200px;
}

tr {
  height: 1px;
}

td {
  height: inherit;
}

div {
  height: 100%;
}

위 내용은 CSS를 사용하여 DIV 요소가 표 셀의 전체 너비와 높이를 채우도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!