Div 하위 항목이 상위 컨테이너의 남은 공간을 채우도록 하려면 어떻게 해야 합니까?

나머지 상위 공간을 차지하도록 div 높이 확장

div 하위 항목이 상위 컨테이너의 나머지 공간을 차지하도록 만드는 것이 일반적인 작업입니다. 높이를 명시적으로 설정하지 않고. 이를 달성하는 몇 가지 방법은 다음과 같습니다.

1. 그리드 레이아웃

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

이 방법은 높이 100px의 한 행으로 구성된 그리드 레이아웃을 만듭니다. 남은 공간은 하위 div가 채워집니다.

2. Flexbox

.container {
  display: flex;
  flex-direction: column;
}

.container .down {
  flex-grow: 1;
}

Flexbox를 사용하면 하위 div에서 flex-grow를 1로 설정하여 나머지 수직 공간을 채우기 위해 확장할 수 있습니다.

3. 키 계산

.up {
  height: 100px;
}

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

이 방법은 CSS 높이 계산을 사용하여 100%에서 첫 번째 자식의 키를 빼고 두 번째 자식에게 남은 키를 제공합니다.

4 . 오버플로 숨김

.container {
  overflow: hidden;
}

.down {
  height: 100%;
}

오버플로를 숨겨 기본 표시 동작을 재정의하면 하위 div가 상위 div의 높이를 채울 수 있습니다.

5. Max-Content

.container {
  height: 100%;
}

.down {
  height: max-content;
}

Max-content 속성 값은 콘텐츠에 따라 하위 div의 크기를 조정하여 남은 공간을 효과적으로 차지합니다.

일부 방법에는 제한이 있거나 브라우저가 있을 수 있습니다. 지원 제한. 특정 요구사항에 따라 적절한 방법을 선택하세요.

위 내용은 Div 하위 항목이 상위 컨테이너의 남은 공간을 채우도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!