JavaScript
CSS - 헤더와 푸터 영역 고정하기
새발개발JA
2022. 1. 26. 10:45
반응형
헤더와 푸터를 고정한 채로
가운데 body 부분만 overflow 속성으로 스크롤을 사용하여 올렸다 내렸다 하고 싶다.
이럴 때는 position 의 sticky 라는 속성을 사용하면 된다.
HTML
<header> 헤더영역 <header / >
<body> // 스크롤바가 나오는 긴 내용 <body />
<footer> 푸터영역 <footer / >
CSS
header {
position: sticky; // 포지션을 스티키로 주면 자연스레 고정된다.
top: 0; // 탑에 붙여야 하므로 0을 준다.
}
footer {
position: sticky;
bottom: 0; // 여기는 바텀에 붙여야 하므로 0을 준다.
}반응형