1 개요[ | ]
- 스티키 사이드바
- 사이드바 sticky
html
Copy
<style>
#navbar {
background: #f003;
}
#main {
display: flex;
}
#sidebar {
align-self: flex-start;
position: sticky;
top: 0;
background: #ff03;
width: 100px;
height: 30vh;
}
#content {
flex: 1;
background: #0f03;
height: 9999px;
}
</style>
<div id='navbar'>메뉴</div>
<div id='main'>
<div id='sidebar'>사이드바</div>
<div id='content'>내용</div>
</div>