상위 컨테이너 높이를 채우기 위해 중첩 요소 스타일 지정
HTML에서는 높이를 채우기 위해 하위 요소를 확장해야 하는 상황이 발생할 수 있습니다. 상위 컨테이너의 이는
와 같은 테이블 요소를 처리할 때 어려울 수 있습니다.
내의 요소 요소.
목표: 요소가 해당 요소의 높이를 완전히 차지합니다. 컨테이너를 사용하여 배경 요소의 적절한 위치를 지정할 수 있습니다.
해결책:
| 요소는 1px와 같은 최소값이더라도 마찬가지입니다. 이렇게 하면 정의된 높이를 가진 상위 항목이 생성되어 중첩된 요소의 높이 백분율을 올바르게 계산합니다.
세부 분석:
-
| 요소: | CSS를 사용하는 요소:
td.thatSetsABackground {
height: 1px;
}로그인 후 복사 -
의 백분율 높이 계산 요소: 이제 요소에는 정의된 높이를 가진 상위 요소가 있습니다. 높이는 이 상위 높이의 백분율로 설정할 수 있습니다.
div.thatSetsABackgroundWithAnIcon {
height: 100%;
}로그인 후 복사 -
위치 배경 요소:
div의 확장된 높이에 따라 CSS를 사용하여 오른쪽 하단에 배치할 수 있습니다.
div.thatSetsABackgroundWithAnIcon {
background-position: bottom right;
}로그인 후 복사 이 접근 방식은 | 의 높이를 채우는 요소입니다. 요소를 사용하면 상위 컨테이너 내에서 배경 요소를 정확하게 배치할 수 있습니다. 위 내용은 중첩된 Div 요소가 TD 상위 컨테이너의 높이를 채우도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
|
|
| | 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
