HTML 및 CSS에서 Div가 페이지의 남은 높이를 차지하도록 만드는 방법은 무엇입니까?

HTML 및 CSS에서 Div가 남은 높이를 차지하도록 만드는 방법

HTML에서는 하나의 div가 전체 높이를 차지해야 하는 특정 레이아웃을 달성하는 것이 일반적인 과제일 수 있습니다. 페이지의 남은 높이. 두 개의 div가 있는 상황을 생각해 보세요.

<div>

목표는 #div2가 페이지의 나머지 높이를 채우도록 만드는 것입니다. 절대 위치 지정을 사용하는 솔루션은 다음과 같습니다.

#div1 {
    width: 100%;
    height: 50px;
    background-color: red; /* Development Only */
}
#div2 {
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0;
    background-color: blue; /* Development Only */
}

이 코드에서 #div1에는 50px의 고정 높이가 주어지고 #div2는 절대 위치에 지정되어 나머지 공간을 차지하도록 만들어졌습니다. top 속성은 #div1의 높이인 50px로 설정됩니다. 하단 속성은 0으로 설정되어 #div2가 상위 페이지(이 경우 페이지 자체) 하단에 고정되어야 함을 나타냅니다. 이렇게 하면 #div2가 페이지의 나머지 높이를 차지하도록 동적으로 늘어납니다.

위 내용은 HTML 및 CSS에서 Div가 페이지의 남은 높이를 차지하도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!