footer 고정시키기

과제를 완성하고 보니 컨텐츠의 양이 많지 않을 때, 두번째 사진처럼 footer가 너무 높이 올라와 보기 안좋게 되어버리는 경우가 있어, 이를 수정하고자 자료를 찾아봤습니다. footer에 absolute를 줘서 계산하는 방법도 있었지만 footer 위를 wrap으로 감싸 min-height : calc(100vh - 115px)(footer의 높이)를 주어 해결하였습니다.

import React from "react";
import { Navigation, Footer, HeadingTag } from ".";
import styled from "@emotion/styled";

export const Layout: React.FC = ({ children }) => {
  return (
    <div>
      <HeadingTag />
      <MinWrap>
        <Navigation />
        <ChildrenWrap>{children}</ChildrenWrap>
      </MinWrap>
      <Footer />
    </div>
  );
};

//styles
const ChildrenWrap = styled.section`
  padding: 1rem 10%;
`;

const MinWrap = styled.section`
  min-height: calc(100vh - 115px);
`;