[CSS] 상단 고정, 하단 고정, 컨텐츠 스크롤 구현(Flex)

작업을 하다 보면 상단 고정, 가운데 영역차지하면서 Y축 스크롤 동작, 하단 고정하는 레이아웃을 만들어야 할 때가 종종 있다.

이럴 때마다 바쁘면 기존 코드 또는 구글링, ChatGPT에게 물어보면서 어찌어찌 구현은 한다.

같이 딸려오는 수많은 알 수 없는 스타일 또는 HTML 구조랑 같이....

 

그래서 이번 포스팅은 제목 그대로 깔끔하게 구현 하고자 한다.

 

요구 사항

1. 헤더 고정, 푸터 고정, 메인 영역 Y축 스크롤

2. 메인 영역 공간은 항상 남은 공간을 다 차지

3. 메인 영역이 넘칠 경우에만 스크롤 생기게 작업

 

설계

전체 영역을 감싸주는 div요소 안에 header, main, footer로 구성할 예정

전체 영역 높이를 설정하는 height: 100vh; 고정된 레이아웃 보장

wrapper의 높이가 화면의 높이와 동일하게 설정되면, header, main, footer 요소들이 화면 전체를 구성하게 됩니다. 

전체 레이아웃 flex, main에 overflow-y 스타일이 이 레이아웃 구조의 핵심이다.

 

코드

HTML 코드

<div class="wrapper">
  <header>
    .wrapper {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    header {
      flex-shrink: 0;
      height: 150px;
      background-color: red;
    }
  </header>
  <main>
    main {
      overflow-y: auto;
      background-color: skyblue;
    }
  </main>
  <footer>
    footer {
      flex-shrink: 0;
      height: 50px;
      background-color: blue;
    }
  </footer>
</div>

 

CSS 코드

* {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  white-space: pre-wrap;
  flex-shrink: 0;
  height: 250px;
  background-color: red;
}

main {
  white-space: pre-wrap;
  overflow-y: auto;
  background-color: skyblue;
  height: 1000px;
}

footer {
  white-space: pre-wrap;
  flex-shrink: 0;
  height: 150px;
  background-color: blue;
}

 

main에 영역이 짧은 경우 스크롤은 생기지 않지만 영역은 꽉 채워진다.

 

main에 컨텐츠가 많아져 스크롤이 생기는 경우

 

flex-shrink를 빼게 되면 현재 가지고 있는 영역만 차지하게 된다.(header, footer)

이 정도면 가운데 스크롤 되는 레이아웃을 깔끔하게 구현할 수 있다.

부족한 부분은 공부하면서 채워보자

 

요새 프론트엔드 개발자는 flex, grid만 잘만 다뤄도 JS를 사용을 덜하고 성능 상 이점을 취할 수 있다.