CSS 스티키 내비게이션드로워

1 개요[ | ]

CSS 스티키 내비게이션드로워

html

Copy

<style>
#navbar {
  background: #f003;
}
#main {
  display: flex;
}
#sidebar-wrapper {
  position: sticky;
  align-self: flex-start;
  top: 0;
  background: #00f3;
}
#sidebar {
  position: absolute;
  top: 0;
  background: #ff03;
  width: 100px;
  height: 30vh;
  color: red;
}
#content {
  flex: 1;
  background: #0f03;
  height: 9999px;
}
</style>

<div id='navbar'>메뉴</div>
<div id='main'>
  <div id='sidebar-wrapper'>
    <div id='sidebar'>드로워</div>
  </div>
  <div id='content'>내용</div>
</div>

2 같이 보기[ | ]