将侧栏组件放入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

如果我了解您的要求。您要使深色菜单成为蓝色框的全部高度，但不与视口一起滚动。如果是这样，则需要将组件放置在绝对位置。固定的位置将确保它始终在视口中。

保持父级或.left菜单的相对位置，然后将组件更改为。

df = df.groupby(['stock','date']).apply(lambda x: x.tail(-1))