프로그래밍 언어/HTML,CSS,JS

CSS-float 자식 DIV 높이를 부모 높이로 확장하는 방법

Rateye 2021. 8. 28. 16:41
728x90
반응형
질문 : CSS-float 자식 DIV 높이를 부모 높이로 확장

페이지 구조는 다음과 같습니다.

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

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

이제 child-left DIV에는 더 많은 콘텐츠가 있으므로 parent DIV의 높이는 자식 DIV에 따라 증가합니다.

그러나 문제는 child-right 키가 증가하지 않는다는 것입니다. 높이를 부모와 같게 만들려면 어떻게해야합니까?

답변

parent 요소의 경우 다음 속성을 추가합니다.

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

.child-right 다음과 같습니다.

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

여기에서 CSS 예제와 함께 더 자세한 결과를 확인하고 여기에서 동일한 높이 열에 대한 자세한 정보를 확인 하세요 .

출처 : https://stackoverflow.com/questions/4804581/css-expand-float-child-div-height-to-parents-height

 

728x90
반응형