3 라인 레이아웃에서 중간 컨텐츠의 높은 적응성을 우아하게 달성하는 방법은 무엇입니까?

웹 페이지의 3 라인 레이아웃 : 중간 컨텐츠를 적응할 수있는 방법은 무엇입니까?

웹 디자인에서는 종종 헤드와 하단 높이가 고정되어있는 3 라인 레이아웃을 구축해야하며, 중간 부분의 높이는 내용에 따라 동적으로 조정됩니다. 중간 내용이 작 으면 페이지 높이가 낮습니다. 내용이 증가하면 스크롤 막대가 중간 부분에 나타나고 그에 따라 페이지 높이가 증가하여 페이지 공간을 완전히 사용합니다. 이 적응 형 레이아웃을 우아하게 달성하는 방법은 무엇입니까?

이 효과를 달성하는 방법에는 여러 가지가 있습니다. 키는 헤드와 하단 높이가 고정되어 있는지 여부입니다.

방법 1 : 머리와 바닥의 고정 높이

헤드와 하단의 컨테이너 높이가 고정되면 CSS의 max-height 및 calc() 함수를 사용할 수 있습니다. max-height 중간 용기의 최대 높이를 제한하는 반면 calc() 나머지 공간을 계산하고 중간 용기에 할당됩니다. 이 방법은 간단하고 사용하기 쉽고 헤드 및 하단 높이가 알려진 경우에 적합합니다.

방법 2 : 높이가 고정되지 않았지만 높이 제한이있는 헤드 및 하단

헤드와 하단의 컨테이너 높이가 고정되지 않았지만 최대 높이 제한이 있으면 플렉스 레이아웃이 더 이상적인 선택입니다. 플렉스 레이아웃은 컨테이너의 요소의 배열과 크기를 유연하게 제어 할 수 있습니다. 적절한 플렉스 특성을 설정함으로써 중간 컨테이너는 컨텐츠에 따라 높이에 적응할 수 있으며 헤드 및 하단 용기는 합리적인 범위 내에서 유지 될 수 있습니다. 이 방법은 더 유연하고 적응력이 뛰어납니다.

어떤 방법을 선택하든 실제 상황에 따라 코드를 조정하여 레이아웃의 안정성과 호환성을 보장해야합니다. max-height , calc() 및 Flex 레이아웃의 숙련도는 이러한 문제를 해결하는 데 핵심입니다. 이러한 CSS 기능을 영리하게 적용함으로써 적응력이 높은 중간 컨텐츠로 3 라인 레이아웃을 쉽게 알 수 있습니다.

위 내용은 3 라인 레이아웃에서 중간 컨텐츠의 높은 적응성을 우아하게 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!