다중 열 레이아웃의 하위 Div를 동일한 높이로 만들려면 어떻게 해야 합니까?

다중 열 레이아웃의 동적 높이 관리

하위 요소 전체에 균일한 높이를 적용하는 것이 어려울 수 있으며, 특히 상위 컨테이너의 높이가 같은 경우에는 더욱 그렇습니다. 지정되지 않았습니다. 이 문서에서는 지정되지 않은 높이의 상위 div 내에서 하위 div의 높이를 100% 달성하는 방법을 다룹니다.

다음 HTML 구조를 고려하세요.

<div>

목표는 "탐색"을 만드는 것입니다. div의 높이는 콘텐츠 크기에 관계없이 "content" div의 높이와 일치합니다.

이를 달성하려면 상위 div ("main")은 display: flex;로 구성되어야 합니다. 및 정렬 항목: 스트레치;. display 속성은 유연한 레이아웃을 가능하게 하는 반면, align-items: Stretch는 강제로 하위 요소를 수직으로 늘려 상위 요소의 높이를 채웁니다. align-items: Stretch가 기본값이지만 다른 값으로 설정하지 마세요.

위 내용은 다중 열 레이아웃의 하위 Div를 동일한 높이로 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!