절대 위치 지정 없이 Div가 나머지 상위 높이를 차지하도록 만드는 방법은 무엇입니까?

절대 위치 지정 없이 Div가 나머지 상위 높이를 차지하도록 만들기

HTML/CSS에서는 하위 div가 차지해야 하는 시나리오가 자주 발생합니다. 특정 높이를 명시적으로 설정하지 않고 상위 컨테이너의 나머지 높이. 문제와 가능한 해결 방법을 자세히 살펴보겠습니다.

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

<div>

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}

여기서 "down" div는 " 아래의 공백을 차지해야 합니다. 위로" div.

해결책

이를 달성하는 방법에는 여러 가지가 있습니다. 이:

그리드:

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

Flexbox:

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

계산 항목:

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

오버플로:

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

참고:

• 의 경우 CSS Grid 및 Flexbox를 지원하는 브라우저에서는 이러한 솔루션이 더욱 우아한 접근 방식을 제공합니다.
• 상위 컨테이너의 높이가 고정된 경우 "오버플로" 방법이 유용할 수 있습니다. 그러나 예상치 못한 스크롤 동작이 발생할 수 있습니다.

위 내용은 절대 위치 지정 없이 Div가 나머지 상위 높이를 차지하도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!