머리글과 바닥글이 포함된 전체 높이 단일 열 CSS 레이아웃을 만드는 방법은 무엇입니까?

머리글과 바닥글이 포함된 CSS 기반 단일 열 레이아웃 만들기

CSS 레이아웃 디자인 영역 내에서 머리글과 바닥글을 제외한 페이지의 전체 높이에 걸쳐 있는 고정 너비, 단일 열 레이아웃을 만날 수 있습니다. 이 요구 사항을 충족하기 위해 각각 고유한 장점과 단점이 있는 다양한 접근 방식이 제시되었습니다.

다행히도 최신 브라우저(2015년 이후)에서는 display:flex 속성을 사용하여 간단하고 안정적인 솔루션에 액세스할 수 있습니다. . 이 접근 방식은 JavaScript가 필요하지 않으며 깔끔하고 효율적인 대안을 제공합니다.

display:flex를 사용하는 솔루션

display:flex를 사용하여 레이아웃을 구현하려면 다음을 따르세요. 단계:

1. html과 body 요소 모두 높이를 100%로 설정하고 패딩이 없으며 패딩이 없습니다. margin.
2. display:flex 및 flex-direction:column 속성을 body 요소에 적용합니다. 이렇게 하면 하위 요소가 수직으로 정렬됩니다.
3. #main 요소를 생성하고 flex-grow 속성을 1로 설정합니다. 이렇게 하면 요소가 나머지 수직 공간을 채우기 위해 확장됩니다.
4. 사용 머리글과 바닥글의 스타일을 원하는 대로 지정하려면 CSS 속성 min-height 및 background를 사용하세요.

예 코드

html, body {height:100%; padding:0; margin:0; width:100%;}
body {display:flex; flex-direction:column;}
#main {flex-grow:1;}

/* optional */
header {min-height:50px; background:green;}
#main {background:red;}
footer {min-height:50px; background:blue;}

<header>header</header>
<div>

이 기술을 활용하면 지정된 기준에 맞는 단일 열 레이아웃을 생성하여 최신 브라우저와의 호환성을 보장할 수 있습니다.

위 내용은 머리글과 바닥글이 포함된 전체 높이 단일 열 CSS 레이아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!