Flexbox를 사용하여 고정 머리글과 바닥글 사이에 유동 콘텐츠 DIV를 어떻게 만들 수 있나요?
- Patricia Arquette원래의
- 2024-11-08 08:17:01426검색
머리글과 바닥글 사이에 유동적 콘텐츠 DIV 만들기
현대적인 레이아웃 디자인을 추구하면서 테이블에서 div로 전환했습니다. 머리글, 바닥글 및 콘텐츠 div를 정렬해야 하는 문제에 직면하여 다양한 화면 해상도를 충족하는 우아한 솔루션을 찾고 있습니다.
이 레이아웃 딜레마에 대한 강력한 솔루션을 제공하는 Flexbox 접근 방식을 고려해 보세요. Flexbox의 고유 기능을 활용하면 원하는 결과를 얻을 수 있습니다. 즉, 남은 공간을 원활하게 채우고 경계 내에서 부드러운 스크롤을 허용하는 콘텐츠 영역이 포함된 고정 머리글 및 바닥글 요소입니다.
Flexbox 구현
Flexbox 구현은 간단하며 몇 가지 HTML과 CSS가 필요합니다. 변경:
HTML:
<body> <header> ... </header> <main> ... </main> <footer> ... </footer> </body>
CSS:
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header,
footer {
flex: none;
}
main {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
flex: auto;
}
이 설정은 머리글과 바닥글 요소를 잠급니다. 지정된 크기 내에서 콘텐츠 영역을 동적으로 확장하여 나머지 수직 공간을 채울 수 있습니다. Overflow-y 및 -webkit-overflow-scrolling 속성은 콘텐츠 영역의 높이를 초과하는 모든 콘텐츠가 해당 범위 내에서 원활하게 스크롤되도록 보장합니다.
Flexbox의 유연성과 다양성을 수용하고 원활하게 적응하는 조화로운 레이아웃을 쉽게 만듭니다. 다양한 화면 해상도로.
위 내용은 Flexbox를 사용하여 고정 머리글과 바닥글 사이에 유동 콘텐츠 DIV를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.