높이를 알 수 없는 부모 높이까지 하위 Div를 늘리려면 어떻게 해야 합니까?

부모 높이에 맞게 하위 Div 늘리기

설명된 것과 같은 상황이 발생하면 하위 div의 높이가 일치해야 합니다. 부모의 키는 알 수 없지만 부모의 키는 알 수 없으므로 Flexbox를 통해 해결책을 찾을 수 있습니다.

수직 크기 조정을 달성하려면 하위 div의 상위 요소에는 다음 스타일이 필요합니다.

display: flex;

또한 브라우저 간 호환성을 보장하려면 브라우저 접두사를 추가해야 합니다.

정렬 항목: 스트레치; 재산도 중요하다. 그러나 이는 플렉스 박스의 align-items에 대한 기본값이므로 다른 값을 사용하려는 것이 아니라면 명시적으로 설정할 필요가 없습니다.

Flexbox의 align-items 속성은 자식 요소에 영향을 미치며, 적용되는 요소입니다. 하위 요소에 대한 확장을 정의하려면 align-self 속성을 사용할 수 있습니다.

다음 예를 고려하세요.

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

이 예에서 other-child div는 단독으로 존재합니다. 부모의 키를 늘리기 위한 목적으로. 결과적으로 하위 div는 상위 div의 조정 가능한 높이를 100% 차지하게 됩니다.

위 내용은 높이를 알 수 없는 부모 높이까지 하위 Div를 늘리려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!