CSS에서 전체 높이, 고정 너비, 중앙 열을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS에서 전체 높이, 고정 너비, 중앙 열을 만드는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-12-14 18:48:12

원래의

245명이 탐색했습니다.

How to Create a Full-Height, Fixed-Width, Centered Column in CSS?

고정 너비, 중앙 집중식 단일 열 및 머리글에서 바닥글까지의 높이를 사용하여 CSS 레이아웃 구현

웹사이트 레이아웃을 디자인할 때 만들기가 어려울 수 있습니다. 머리글과 바닥글을 제외하고 페이지의 전체 높이에 걸쳐 있는 고정 너비의 단일 중앙 열입니다. 이 기사에서는 순수 CSS를 사용하여 이 문제에 대한 두 가지 잠재적인 솔루션을 살펴봅니다.

옵션 1: 최신 브라우저용 Flexbox 사용

Flexbox를 지원하는 브라우저의 경우 Flexbox 컨테이너를 사용하는 간단한 접근 방식은 다음과 같습니다.

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

로그인 후 복사

<header>header</header>
<div>

로그인 후 복사

옵션 2: 더 넓은 브라우저를 위한 절대 위치 지정 호환성

더 넓은 브라우저 호환성을 위한 대체 솔루션은 절대 위치 지정을 사용하는 것입니다.

body {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
header {position: absolute; top: 0; left: 0; right: 0; height: 50px;}
#main {position: absolute; top: 50px; bottom: 0; left: 50%; transform: translate(-50%, 0); width: calc(100% - 100px);}
footer {position: absolute; bottom: 0; left: 0; right: 0; height: 50px;}

로그인 후 복사