【React】フッターをいい感じに配置する

はじめに

備忘録として残します。
もっと良い書き方があれば指摘していただけると幸いです。

ヘッダーはページ最上部、フッターはページ最下部に来るようにコンポーネントを作成していきます。

コード

LayoutWrapper.tsx

"use client";

import styled from "styled-components";

const LayoutWrapper = styled.div`
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
`;

export default LayoutWrapper;

Footer.tsx

"use client";

import styled from "styled-components";

const FooterComponent = styled.footer`
  margin-top: auto;
  padding: 15px 0;
  text-align: center;
  color: #fff;
  background: #000;
`;

const FooterText = styled.p`
  font-size: 16px;
`;

const Footer = () => {
  return (
    <FooterComponent>
      <FooterText>Sample Page Author: SBS_takumi</FooterText>
    </FooterComponent>
  );
};

export default Footer;

layout.tsx

(中略)
<LayoutWrapper>
 <Header/>　// 任意のHeaderコンポーネントでよいです。
 {children}
 <Footer/>
</LayoutWrapper>

説明

LayoutWrapperについて、min-height: 100%にすることで、childrenの内容が少ない場合でも画面いっぱいに要素が表示されるようになります。

display: flex、flex-direction: columnとすることで、LayoutWrapper内の要素が
列(縦)方向に並ぶようになります。
これを利用して、ヘッダー、フッター、childrenを縦方向に並べることができます。

上記の設定を行ったうえでFooterComponentについて、margin-top: autoと設定することでページ最下部にフッターを固定することができます。