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>