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

Div 요소의 남은 높이 점유

웹 디자인에서 div 요소가 나머지 높이를 차지하도록 해야 하는 상황이 발생할 수 있습니다. 페이지의 높이. 다음 시나리오를 고려해보세요. 다음 코드가 포함된 두 개의 div가 있습니다.

<div>
<p>div2가 페이지의 나머지 높이를 차지하게 하려면 어떻게 해야 합니까?</p>
<p><strong>해결책: 절대 위치 지정</strong></p>
<p>이를 달성하려면 다음 CSS로 절대 위치 지정을 활용할 수 있습니다.</p>
<pre class="brush:php;toolbar:false">#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는 위쪽 여백이 50px(div1의 높이)로 설정되고 아래쪽 여백이 0으로 설정되어 나머지 높이를 차지하게 되어 절대적으로 배치됩니다.