헤더 고정 && 내용 "100% - (헤더 height)" 하는 법

일단 tailwind css를 기준으로 설명하겠지만 결국 어느 css를 사용하든 원리는 같다!

헤더 고정

          <section className={'h-28'}>
            <Header />
          </section>

우선 헤더를 고정하기 위해서 위 코드처럼 h-28(7rem)으로 고정을 했다.

내용 "100% - (헤더 height)" 하는 법

          <section className={'h-noneHeader'}>
            <Routes>
              <Route path={'/'} element={<Home />} />
              <Route path={'/login'} element={<Login />} />
              <Route path={'/signup'} element={<SignUp />} />
            </Routes>
          </section>

여기서 noneHeader는 tailwind css를 custom한 style이다.

 

-tailwind.config.js

      height: {
        noneHeader: 'calc(100vh - 7rem)',
      },

이렇게 calc를 사용해서 100vh - (헤더 height)를 하면 아래 오는 내용을 손 쉽게 가운데 정렬할 수 있다.

완성 코드

          <section className={'h-28'}>
            <Header />
          </section>
          <section className={'h-noneHeader'}>
            <Routes>
              <Route path={'/'} element={<Home />} />
              <Route path={'/login'} element={<Login />} />
              <Route path={'/signup'} element={<SignUp />} />
            </Routes>
          </section>

이렇게 구성하면 어떤 해상도에서든 헤더의 길이가 고정되어 있다. 그렇기에 초반에 Layout을 제대로 잡아주었다.

---

이런 구성에 대해서 늘 생각했지만 매번 귀찮다고 하지 않았다.

막상해보니 엄청 간단한 것인데 여태 시도하지 않은 것을 반성해야겠다..!

앞으로는 궁금한 점이 생기면 바로 시도해보는 사람이 되려고 노력하고 싶다!