부동 하위 Div 높이를 부모의 높이와 일치시키는 방법은 무엇입니까?

상위 높이와 일치하도록 부동 하위 Div 높이 균형 조정

문제 설명:

다음 HTML이 포함된 페이지 구조:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

왼쪽 하위 div의 콘텐츠가 확장됨에 따라 상위 div의 높이도 정당하게 증가합니다. 그러나 child-right div의 높이는 변경되지 않습니다. 이는 child-right의 높이를 부모의 높이와 동일하게 만드는 방법에 대한 질문을 제기합니다.

해결책:

child-right div의 높이가 상위 div의 높이와 일치하도록 하려면 다음 CSS 속성을 상위 div에 적용하세요. 요소:

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

이러한 속성은 상위 요소의 높이가 정의되어 있고 부동 하위 요소가 포함되어 있는지 확인합니다. 다음으로, 다음 CSS 속성을 .child-right 클래스에 추가합니다.

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

이러한 속성은 child-right div에 절대 위치를 제공하고 높이를 100%로 설정하고 오른쪽 가장자리에 배치합니다.

동일 높이 열 생성에 대한 자세한 예와 정보는 참조 섹션에 제공된 링크를 참조하세요. 아래.

참고 자료:

• [동일 높이 열에 대한 CSS 예제](외부 리소스 링크)
• [동일 높이에 대한 정보 칼럼](외부 리소스 링크)

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