DIV 요소를 테이블 셀 높이까지 늘리는 방법은 무엇입니까?

표 셀 높이를 채우기 위해 DIV를 늘리는 방법

특정 HTML 레이아웃에서는 늘리려면 DIV 요소가 필요할 수 있습니다. 상위 테이블 셀(TD)의 높이와 일치하도록 세로로 정렬합니다. 이를 통해 콘텐츠를 셀의 오른쪽 하단 모서리에 정렬하는 등 DIV 내 콘텐츠를 정확하게 배치할 수 있습니다.

이를 달성하기 위한 한 가지 접근 방식은 TD에 높이를 1픽셀로 설정하는 것입니다. 이는 DIV에 정의된 상위 높이를 제공하여 높이 백분율을 계산합니다. DIV의 콘텐츠가 1px보다 크므로 TD와 결과적으로 DIV가 자동으로 수직으로 확장됩니다.

예:

CSS:

.td-container {
  background-color: #f5f5f5;
}

.div-content {
  height: 100%;
  background-image: url(icon.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
}

이 예에서 TD의 높이는 1px이고 데모용 배경색입니다. TD 내의 DIV 높이는 100%이므로 수직으로 늘어나 TD를 채웁니다. 그러면 배경 위치 속성으로 인해 배경 이미지가 DIV의 오른쪽 하단에 배치됩니다.

위 내용은 DIV 요소를 테이블 셀 높이까지 늘리는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!