하위 Div가 상위 Div의 나머지 높이를 차지하도록 하려면 어떻게 해야 합니까?

Div가 부모의 남은 키를 차지하도록 만드는 방법

다음 HTML 및 CSS 코드를 고려하세요.

<div>
<pre class="brush:php;toolbar:false">#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}

여기에는 두 개의 하위 요소가 있는 컨테이너 div가 있습니다. 첫 번째 자식(#up)은 지정된 높이를 가지지만 두 번째 자식(#down)은 그렇지 않습니다. #down이 컨테이너 div의 나머지 높이를 차지하도록 하려면 어떻게 해야 합니까?

해결책

브라우저 호환성 및 #up에 결정된 높이.

옵션:

1. 그리드 레이아웃:

.container {
  display: grid;
  grid-template-rows: 100px;
}

2. Flexbox 레이아웃:

.container {
  display: flex;
  flex-direction: column;
}
.container .down {
  flex-grow: 1;
}

3. 계산된 높이:

.container .up {
  height: 100px;
}
.container .down {
  height: calc(100% - 100px);
}

4. 오버플로 숨김:

.container {
  overflow: hidden;
}
.container .down {
  height: 100%;
}

방법 선택은 특정 요구 사항 및 브라우저 지원에 따라 다릅니다. 이제 CSS에는 크기 조정을 위한 max-content 속성 값이 포함되어 있으며 이는 특정 시나리오에 적합할 수 있습니다.