Поместите компонент боковой панели внутри div

Question

У меня есть компонент с именем app-side-menu, и я хочу поместить этот компонент внутри синего прямоугольника, занимающего полную высоту синего div Если вы заметили, меню превышает нижние пределысинего div, и когда я прокручиваю вниз, меню де выходит с прокруткой

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;
}

Answer 1

Если я понимаю, что вы спрашиваете.Вы хотите, чтобы темное меню было на всю высоту синего поля, но не прокручивалось с помощью view-порта.Если это так, вам нужно позиционировать компонент абсолютно.Фиксированное позиционирование гарантирует, что оно всегда находится в порту просмотра.

Держите родительское или левое меню в относительном положении, а затем измените компонент на.

[data-component='sidebar'] .first-menu {
  position: absolute;
  top: 60px; // 0 if you want it to start right at the top of left menu
  left: 0;
  height: 100%;
  background-color: #292a2c;
  width: 75px;
  overflow: hidden;
  transition: width 0.5s;
}