웹 디자인에서 머리글과 바닥글이 포함된 중앙 단일 열 레이아웃을 어떻게 만들 수 있나요?

머리글과 바닥글을 갖춘 단일 열 중앙 집중식 고정 너비 디자인

웹 디자인 영역에서는 머리글과 바닥글 요소를 수용하면서 전체 화면에 걸쳐 중앙에 콘텐츠를 배치하는 것은 중요한 작업이 될 수 있습니다. 이 질문은 여러 가지 접근 방식과 이 디자인 요구 사항에 대한 적합성에 대해 자세히 설명합니다.

접근 방식 1: 가운데가 가짜인 3열

여백을 가운데로 조정하여 3개의 열 만들기 중앙 기둥과 높이 확장을 위한 가짜 중앙 요소가 제안되었습니다. 그러나 불필요한 빈 측면 열이 도입되어 실용성이 떨어집니다.

접근 방식 2: 자동 여백 및 상단 오프셋이 있는 단일 열

자동 여백이 있는 단일 열 배치 센터링과 상단 오프셋을 사용하면 원하는 효과를 얻을 수 있습니다. 그러나 나머지 높이를 차지하도록 기둥을 확장하려면 추가 탐색이 필요합니다.

해결책: Flexbox

최신 브라우저의 경우 Flexbox의 출현은 간단한 솔루션을 제공합니다. Flexbox는 포괄적인 레이아웃 제어 기능을 제공하므로 단일 열 디자인을 쉽게 생성할 수 있습니다.

JavaScript를 사용하는 것은 권장되지 않습니다. 대신 다음 CSS 코드를 사용하는 것이 좋습니다.

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>

이 솔루션은 Flexbox를 활용하여 #main 요소가 나머지 높이(머리글 및 바닥글 제외)를 차지하는 단일 열 레이아웃을 생성합니다. 선택적 머리글 및 바닥글 스타일은 필요에 따라 맞춤설정할 수 있습니다.

위 내용은 웹 디자인에서 머리글과 바닥글이 포함된 중앙 단일 열 레이아웃을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!