div가 형제 div의 높이로 확장되는 방법

Question

잠시 동안 검색했지만 해결 방법을 찾을 수 없습니다.

콘텐츠가 2 개인 div가 있습니다.

<div id="container"> 
    <div id="content1"> 
    Content1 
    </div> 

    <div id="content2"> 
    <span style="font-size: 1500px;"> Stretch height</span> 
    </div> 
</div> 

와 CSS : #의 content2가 내용에 맞게 확장하는 동안

#container { 
    height: 100%; 
} 

#content1 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 50%; 
    float:right; 
    background-color: pink; 
    min-height: 100%; 
    height: auto; 
} 

#content2 { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 50%; 
    float:left; 
    background-color: red; 
    min-height: 100%; 
    height: auto; 
} 

는 현재 #의 콘텐츠 1가 100 %의 높이를 가지고있다. 이렇게하면 # content1의 배경색이 맨 위에 만 나타나고 아래로 스크롤하면 색이 보이지 않습니다.

어떻게 극복 할 수 있습니까? (JS를 사용하지 않고)

Answer 1

min-height: 100%을 사용하는 대신 bottom: 0을 사용할 수 있습니다. top 및 bottom 속성이 모두 0으로 설정되면 전체 높이를 채 웁니다 (position이 absolute으로 설정된 경우).