가변 높이 상위 내에서 하위 요소 높이를 100% 달성하려면 어떻게 해야 합니까?

다양한 부모에서 100% 하위 높이 달성

다중 열 레이아웃에서 탐색 열이 기본 콘텐츠와 수직으로 정렬되도록 보장 결정적이다. 그러나 상위 요소의 높이를 지정하지 않으면 이는 어려울 수 있습니다.

해결책:

상위 요소에 flex 디스플레이 속성을 사용합니다. 이를 통해 어린이는 부모의 키를 차지하면서 수직으로 구부리고 확장할 수 있습니다.

.parent {
  display: flex;
}

추가 속성:

• align-items: Stretch; 하위 요소가 상위 요소 내에서 수직으로 늘어나도록 설정합니다.
• flex-direction: column; 하위 요소를 수직으로 정렬합니다(기본값).

예:

.parent {
  display: flex;
  align-items: stretch;
}

.child {
  height: 100%;
  width: 50%;
}

참고:

• 브라우저 간 호환성을 위한 접두사는 다음과 같습니다. 권장됩니다.
• 적절한 수직 정렬을 위해서는 상위 요소의 높이가 어느 정도인지 확인하는 것이 중요합니다.

위 내용은 가변 높이 상위 내에서 하위 요소 높이를 100% 달성하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!