웹 페이지에서 메인 콘텐츠 영역이 헤더와 푸터 사이의 남은 공간을 화면 높이만큼 가득 채우도록 만들고 싶다면, CSS의 position 속성을 활용하는 것이 간단하고 효과적인 방법입니다.
position 속성이란?
CSS의 position 속성은 요소의 위치 지정 방식을 결정합니다. 사용할 수 있는 값은 다음과 같습니다.
- static – 기본값으로, 요소가 문서 흐름에 따라 배치됩니다.
- relative – 원래 위치를 기준으로 상대적으로 배치됩니다.
- absolute – 가장 가까운 위치 지정 조상 요소를 기준으로 배치됩니다.
- fixed – 뷰포트(브라우저 화면)를 기준으로 고정됩니다.
- sticky – 스크롤 위치에 따라 relative와 fixed처럼 동작합니다.
메인 콘텐츠 div를 화면 높이에 맞게 채우는 예제
아래 예제는 백분율(%)로 높이를 지정하지 않고도, jQuery 없이 순수 CSS만으로 메인 콘텐츠 영역이 화면을 가득 채우도록 구현한 코드입니다.
.mainbody {
position: absolute; /* 요소의 위치를 absolute로 설정 */
top: 30px; /* 헤더 높이를 30px로 정의 */
bottom: 10px; /* 푸터 높이를 10px로 정의 */
width: 100%; /* 너비를 100%로 설정 */
}코드 설명
position: absolute; – 메인 콘텐츠 div를 절대 위치로 지정하여 문서 흐름에서 분리시킵니다. 이렇게 하면 top과 bottom 값을 기준으로 요소가 늘어나며 남은 공간을 자동으로 채웁니다.
top: 30px; – 화면 상단에서 30px 아래부터 콘텐츠가 시작되도록 합니다. 이 값은 헤더(header)의 높이에 맞춰 조절하면 됩니다.
bottom: 10px; – 화면 하단에서 10px 위까지 콘텐츠가 확장되도록 합니다. 이 값은 푸터(footer)의 높이에 맞춰 설정하면 됩니다.
width: 100%; – 콘텐츠 영역이 화면 전체 너비를 차지하도록 합니다.
참고: 부모 요소에 position 지정하기
position: absolute는 가장 가까운 위치 지정 조상을 기준으로 동작하기 때문에, 의도한 대로 화면 전체를 기준으로 삼으려면 body 또는 감싸는 컨테이너에 position: relative를 지정해 주는 것이 좋습니다.
body {
position: relative;
margin: 0;
}마무리
이 방법은 별도의 JavaScript나 jQuery 없이 몇 줄의 CSS만으로 헤더와 푸터 사이의 메인 콘텐츠 영역이 화면 높이를 가득 채우도록 만들 수 있는 실용적인 기법입니다. 최신 프로젝트에서는 Flexbox(display: flex)나 min-height: 100vh 같은 방법도 함께 고려하면 더욱 유연한 레이아웃을 구성할 수 있습니다.