다른 Div의 고정 높이를 유지하면서 Div 요소가 남은 페이지 높이를 차지하도록 만드는 방법은 무엇입니까?

Div 요소로 일관된 높이 분포 유지

고급 CSS 기술을 통해 여러 div 요소 간에 비례적인 높이 분포를 보장할 수 있습니다. 다음 시나리오를 고려해보세요.

<p>
<pre>

</pre>
</p>

목표는 div2가 페이지의 나머지 높이를 차지하도록 하고 div1은 고정된 높이를 유지하도록 하는 것입니다. height.

해결책: 절대 위치 지정

다음 CSS 스타일을 사용하면 원하는 동작을 얻을 수 있습니다.

<p>
<div>

div1{

}

div2{

}</pre>
< 홍보 e><div><🎝🎝🎝>

</div>
</p>

설명

By div2에 절대 위치 지정을 적용하면 페이지의 일반 흐름에서 제거되고 대신 지정된 위쪽 및 아래쪽 값을 기준으로 위치가 지정됩니다. top 속성은 div1의 상단 가장자리로부터의 거리를 설정하는 반면, 하단 속성은 요소가 페이지 하단까지 확장되도록 합니다. div2의 너비는 페이지의 전체 너비에 걸쳐 100%로 설정됩니다.

이 기술을 사용하면 div1의 높이와 전체 페이지 높이를 기반으로 div2의 높이를 동적으로 조정할 수 있어 일관된 너비를 보장할 수 있습니다. 반응형 레이아웃.

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