상하단 고정바 있을 때 내용에 CSS 주는 법

상단 바

.gnb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3rem;
  border-bottom: 1px solid rgb(240, 240, 240);
  background-color: white;
}

하단 바

.bottom-bar {
  background-color: white;
  height: 4rem;
  width: 100vw;
  position: fixed;
  bottom: 0;
}

중간 내용

position : fixed
width: 100vw
top : 상단 고정 바 크기
bottom : 하단 고정 바 크기
overflow-y: scroll
(내용물이 컨테이너보다 길어질 경우 스크롤 처리한다)

결과 : 중간 내용이 상,하단 바에 가려지지 않고 스크롤된다.