절대 위치 지정 없이 자식 Div가 부모의 남은 높이를 차지하도록 만드는 방법은 무엇입니까?

절대 위치 지정 없이 Div가 나머지 상위 높이를 차지하도록 만들기

소개

프런트엔드 개발에서는 컨테이너 div 내의 요소에 공간을 할당하는 것이 일반적일 수 있습니다. 도전. 한 가지 시나리오는 하위 div가 상위의 나머지 높이를 차지하도록 만드는 것입니다. 특히 상위의 키는 알려져 있지만 하위의 키는 알 수 없는 경우에 그렇습니다. 이 문서에서는 절대 위치 지정에 의존하지 않고 이를 달성하는 방법을 살펴봅니다.

CSS 기술 활용

• 그리드 레이아웃: 단일 값(예: 100px)을 갖는 컨테이너의 경우 하위 div가 자동으로 나머지 공간을 채웁니다.
• Flexbox: 컨테이너의 display: flex 및 flex-direction: 열 스타일을 사용하여 하위 div의 flex-grow 속성을 1로 설정합니다. 이는 하위에 효과적으로 지시합니다. 남은 공간을 확장하여 차지하세요.
• 계산기 기반 접근 방식: 첫 번째 아이의 키가 두 번째 자식의 키는 CSS의 calc(100% - first_child_height)를 사용하여 계산할 수 있습니다.
• 오버플로 속성: 컨테이너의 오버플로 속성이 숨김으로 설정된 경우 하위 div를 컨테이너 크기에 맞게 효과적으로 자릅니다. 하위 div의 높이를 100%로 설정하면 사용 가능한 공간을 채우기 위해 확장됩니다.

샘플 코드

자세한 예시는 제공된 CSS 및 HTML 스니펫을 참조하세요. 이러한 기술. max-content 속성은 크기 조정 옵션으로 간주되어 경우에 따라 고정 높이가 필요하지 않을 수도 있습니다.

위 내용은 절대 위치 지정 없이 자식 Div가 부모의 남은 높이를 차지하도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!