본문 바로가기
JavaScript

CSS - 헤더와 푸터 영역 고정하기

by 새발개발JA 2022. 1. 26.
반응형

헤더와 푸터를 고정한 채로 

가운데 body 부분만 overflow 속성으로 스크롤을 사용하여 올렸다 내렸다 하고 싶다.

이럴 때는 position 의 sticky 라는 속성을 사용하면 된다.

 

HTML

<header> 헤더영역 <header / > 

<body> // 스크롤바가 나오는 긴 내용 <body />

<footer> 푸터영역 <footer / >

 

CSS


header {
  position: sticky; // 포지션을 스티키로 주면 자연스레 고정된다.
  top: 0;	    // 탑에 붙여야 하므로 0을 준다.
}

footer {
  position: sticky;
  bottom: 0;	    // 여기는 바텀에 붙여야 하므로 0을 준다.
}
반응형

댓글