부동 자식 Div를 부모 높이까지 확장하는 방법은 무엇입니까?

하위 Div 높이를 부모 높이로 확장

상위 요소와 하위 요소가 나란히 배치되어 있는 웹 레이아웃에서는 종종 필요한 경우가 있습니다. 높이가 동일한지 확인합니다. 이는 하위 요소 내의 콘텐츠로 인해 상위 요소가 늘어나거나 압축되는 것을 방지하기 위한 것입니다.

문제:

두 개의 부동 하위 div가 있는 상위 div가 있습니다. (어린이 왼쪽 및 어린이 오른쪽). child-left의 콘텐츠가 증가하면 상위 div의 높이가 그에 따라 조정됩니다. 그러나 child-right의 높이는 변경되지 않습니다.

해결책:

child-right의 높이를 상위와 동일하게 만들려면 다음 CSS를 적용하세요. styles:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.child-left {
    float: left;
}

.child-right {
    background: green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

• .parent:

  • overflow: Hidden: 상위 div의 콘텐츠가 경계를 넘어 넘쳐나는 것을 방지합니다.
  • position:relative: 상위 div를 하위 div의 상대 위치 지정 컨텍스트로 설정합니다. divs.

• .child-left:

  • float: left: 하위 왼쪽을 parent.

• .child-right:

  • 배경: 녹색: 데모용 선택 색상입니다.
  • height: 100%: child-right의 높이를 일치하도록 설정합니다. parent.
  • width: 50%: child-right의 너비를 부모의 50%로 지정합니다.
  • position:absolute: 부모 내에서 child-right를 절대적으로 배치합니다.
  • right: 0: child-right를 부모의 오른쪽에 정렬합니다.
  • top: 0: child-right를 부모의 상단에 정렬합니다.

이러한 스타일을 결합하면 child-left의 내용에 관계없이 상위에 맞게 원하는 child-right 높이 확장을 달성할 수 있습니다.

위 내용은 부동 자식 Div를 부모 높이까지 확장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!