I have a component called app-side-menu that I want to place inside a blue rectangle, taking up the full height of the blue div https://i.sstatic.net/OJGVV.png. The issue is that the menu extends beyond the bottom limits of the blue div and moves along with the scroll when I scroll down.
app.component.html
<div class="top-menu" style="border:1px solid red;height: 60px;">
<app-top-menu></app-top-menu>
</div>
<div class="wrapper"style="border:5px solid green">
<div class="left-menu" style="border:3px solid blue">
<app-side-menu></app-side-menu>
</div>
<div class="main-content">
<router-outlet></router-outlet>
</div>
</div>
app.component.css
.top-menu{
padding: 0%;
margin: 0px;
}
.main-content{
float: left;
border: 1px solid pink;
height: 100%;
position: relative;
width: 86%
}
.wrapper{
position: absolute;
width: 100%;
height:100%
}
.left-menu{
position: relative;
float: left;
width: 14%;
height: 100%;
}
side-menu.css
[data-component='sidebar'] .first-menu {
position: fixed;
background-color: #292a2c;
height: 100vw;
width: 75px;
top: 60px;
overflow: hidden;
transition: width 0.5s;
}