>웹 프론트엔드 >CSS 튜토리얼 >다른 Div의 고정 높이를 유지하면서 Div 요소가 남은 페이지 높이를 차지하도록 만드는 방법은 무엇입니까?

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

Linda Hamilton
Linda Hamilton원래의
2024-11-08 08:53:02822검색

How to Make a Div Element Occupy Remaining Page Height While Maintaining a Fixed Height for Another Div? 
</p> <p>Div 요소로 일관된 높이 분포 유지</p> <p>고급 CSS 기술을 통해 여러 div 요소 간에 비례적인 높이 분포를 보장할 수 있습니다. 다음 시나리오를 고려해보세요.</p> <p>


</p>
<p>

</p> <p> 목표는 div2가 페이지의 나머지 높이를 차지하도록 하고 div1은 고정된 높이를 유지하도록 하는 것입니다. height.</p> <p>해결책: 절대 위치 지정</p> <p>다음 CSS 스타일을 사용하면 원하는 동작을 얻을 수 있습니다.</p> <p>


div1{

}

div2{

}
< 홍보 e>

<🎝🎝🎝>


</p> <p>설명</p> <p>By div2에 절대 위치 지정을 적용하면 페이지의 일반 흐름에서 제거되고 대신 지정된 위쪽 및 아래쪽 값을 기준으로 위치가 지정됩니다. top 속성은 div1의 상단 가장자리로부터의 거리를 설정하는 반면, 하단 속성은 요소가 페이지 하단까지 확장되도록 합니다. div2의 너비는 페이지의 전체 너비에 걸쳐 100%로 설정됩니다.</p> <p>이 기술을 사용하면 div1의 높이와 전체 페이지 높이를 기반으로 div2의 높이를 동적으로 조정할 수 있어 일관된 너비를 보장할 수 있습니다. 반응형 레이아웃.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.