div가 페이지의 나머지 높이를 차지하도록 만드는 방법은 무엇입니까?

최적의 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은 고정된 높이를 유지하는 반면 div2는 div1의 아래쪽에서 시작하여 페이지 아래쪽까지 남은 수직 공간을 차지하여 효과적으로 채워집니다. 남은 높이.

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