[HTML/CSS] 상단영역 고정하기 #상단고정 #헤더고정

상단 (헤더) 영역을 항상 고정

position fixed 로 영역을 잡는다.

 

| HTML

<div>
    <header>
        <h1>상단 항시 고정</h1>
    </header>
    <div id="contents"></div>
</div>

| CSS

overflow: auto;

내용이 많아질 때 스크롤 허용

body, h1{
    margin: 0;
}
header{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 4rem;
    background: lightgray;
    line-height: 4rem;
    text-align: center;
}
#contents{
    position: fixed;
    top: 4rem;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

| JS (단순 내용을 1~100까지 출력)

const arr = [];
for(let i=1; i<=100; i++){
    arr.push('<p>'+i+'</p>');
}
const num = document.getElementById('contents');
num.innerHTML=arr.toString().replace(/,/gi,'');

---

아래 결과 예시