[TIL] 2023.10.12 - Tailwind CSS(하단바 고정하기)

 Layout 

export default function Layout(prop) {
  return (
    // 부모요소(Layout) : relative로 잡기 / overflow-auto : 화면에서 넘어가는 부분은 스트롤바 나오게 하기
    <div className="relative overflow-auto h-screen max-w-3xl mx-auto border-2 border-black">
      {prop.children}
    </div>
  );
}

 

 하단바 페이지(MyPage) 

export default function MyPage() {

  return (
    <Layout>
                  {/* mb-28 적용해서 하단바와 겹치지 않게 공간 확보하기! */}
      <div className="mb-28 mt-4 flex flex-row items-center cursor-pointer">
        하단바 바로 위 요소
      </div>
                  {/* fixed bottom-0 : 위치 바닥에 고정 / max-w-3xl w-full : 하단바 최대 weight 설정하고, w-full로 가득 차게! */}
      <div className="fixed bottom-0 max-w-3xl w-full h-[84px] bg-[#F2F2F2] flex justify-center">
        하단바
      </div>
    </Layout>
  );
}