header 상단 고정, footer 하단 고정

항상 하면서 헷갈리고 기억이 나지가 않아 기록을 했다.
기본적인 구성 하는 헤더와 푸터의 고정법,,,
알아보자! 🙌🏻

 

header 상단 고정

export default function Header() {

  return (
    <Wrapper>
		... 내용생략
    </Wrapper>
  );
}

const Wrapper = styled.div`
	position: sticky;
  	top: 0;
`

Header 를 구성하는 전체를 감싸는<Wrapper>에

position: sticky; top: 0;

 

>>

적용해주면 헤더가 고정하며 아래 내용만 움직이는 걸 볼 수 있다.

 

 

footer 하단 고정

App.js

      <Header />

      <Wrapper>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/signUp" element={<SignUp />} />
          <Route path="/sellerSignUp" element={<SellerSignUp />} />
          <Route path="/findId" element={<FindId />} />
          <Route path="/findPassWord" element={<FindPassWord />} />
        </Routes>
      </Wrapper>

      <Footer />

const Wrapper = styled.div`
  min-height: 100%;
  padding-bottom: 200px;
`;

헤더와 푸터를 제외한 나머지 보여지는 페이지를 <Wrapper> 로 감싼 뒤

최소 높이와, 푸터 높이만큼의

padding-bottom : [푸터높이 값] 을 준다.

 

 

App.css

body,
html {
  height: 100%;
}

css reset 으로 설정 되어 있는 body의 기본값

height: 100%

 

 

Footer.jsx

export default function Footer() {
  return <Wrapper>Footer</Wrapper>;
}

const Wrapper = styled.div`
  width: 100%;
  height: 200px;
  background-color: gainsboro;

`;

푸터 확인을 위한 css

 

>>

중간에 걸쳐 있지 않고, 하단에 잘 들어가 있는걸 볼 수 있다.