CSS 스티키 사이드바

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>

2 같이 보기[ | ]

3 참고[ | ]