DIV 요소가 다른 DIV 다음에 남은 페이지 높이를 차지하도록 만드는 방법은 무엇입니까?

DIV 요소로 남은 페이지 높이 점유

웹 개발에서는 페이지 높이를 자동으로 조정하여 페이지 높이를 채우는 요소가 필요한 경우가 많습니다. 페이지에 남은 공간. 이 경우 문제는 첫 번째 DIV(#div1)를 고려한 후 두 번째 DIV(#div2)가 나머지 높이를 차지하도록 만드는 것입니다.

이를 달성하기 위해 CSS 절대 위치 지정이 사용됩니다.

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

절대 위치 지정을 사용하면 #div2가 페이지의 일반 흐름에서 제거되고 해당 위치는 가장 가까운 위치의 상위 항목(#div1)을 기준으로 결정됩니다.

• top: 50px: #div1 상단과 #div2 상단 사이의 거리를 지정합니다.
• bottom: 0: #div2가 수직으로 확장되어 하단까지 남은 공간을 채우도록 합니다. page.

이 접근 방식을 사용하면 #div2가 페이지 높이에 따라 높이를 동적으로 조정하여 #div1 아래 남은 전체 공간을 차지하도록 할 수 있습니다.

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