如何使用CSS修复侧边栏和标题

Question

如何修复侧边栏？

我正在使用Angular，router-outlet是页面的组件，我希望侧边栏和标题不移动。我应该在我的CSS中添加什么？这是我的代码

＆＃13;

＆＃13;

<div class="whole-page" *ngIf="showSidebar; else login">
      <!--header-->
      <div class="ui top attached demo menu" >
          <a class="item" (click)="sidebar.toggle()">
              <i class="sidebar icon"></i>
          </a>
          <h3>Attendance Management System</h3>
          <div class="right menu">
              <div class="item">User</div>
              <a class="item"><i class="sign out alternate icon"></i></a>
          </div>
      </div>

      <!--sidebar-->
      <sui-sidebar-container class="ui bottom attached segment">
        <sui-sidebar class="inverted vertical" #sidebar>
            <a class="item" routerLink="/attendance-record">Attendance Record</a>
            <a class="item" routerLink="/timestamp-cebu">Timestamp Cebu</a>
        </sui-sidebar>
        <sui-sidebar-sibling [isDimmedWhenVisible]="false">
            <div class="pages">
                <router-outlet></router-outlet>
            </div>
        </sui-sidebar-sibling>
      </sui-sidebar-container>
</div>

＆＃13;

＆＃13;

＆＃13;

  

目前，此侧边栏的外观会随附照片

而剪切

我唯一拥有的CSS适用于whole-page类和pages类，如下所述

＆＃13;

＆＃13;

.whole-page {
    height: 100%;
}
.pages{
    padding: 30px;    
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以为侧边栏和标题创建单独的组件。这样你就可以使用它们了。

我相信这种情况类似于 How to use flex-layout in nested components in angular 5?这个。