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

Question

如何修复侧边栏？

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

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

目前，这张侧边栏的外观随附照片而剪切

我唯一的CSS是whole-page类和pages类，如下所述

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

Answer 1

您可以尝试使用此代码，希望它适合您。

HTML：

<div class="whole-page" *ngIf="showSidebar; else login">
    <!--header-->
    <div class="ui top attached demo menu header" >
        <h3>Attendance Management System</h3>
    </div>
    <!--sidebar-->
    <sui-sidebar-container class="ui bottom attached segment">
        <sui-sidebar class="inverted vertical side-bar" #sidebar>
            <li>
                <a class="item" routerLink="/attendance-record">Attendance Record</a>
            </li>
            <li>
                <a class="item" routerLink="/timestamp-cebu">Timestamp Cebu</a>
            </li>
            <li>
                <a class="item" routerLink="/attendance-record">Attendance Record</a>
            </li>
            <li>
                <a class="item" routerLink="/timestamp-cebu">Timestamp Cebu</a>
            </li>
        </sui-sidebar>
        <sui-sidebar-sibling class="content" [isDimmedWhenVisible]="false">
            <div class="pages">
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
                <p>Hello World</p>
            </div>
        </sui-sidebar-sibling>
    </sui-sidebar-container>
</div>

CSS：

.header{
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: black;
    color: white;
    z-index: 3;
}

.side-bar{
    width: 25%;
    float: left;
    position: fixed;
    background: red;
    height: 100vh;
    top: 60px;
}

.content{
    background: green;
    width: 75%;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 60px;
}

Answer 2

使用下面的代码来固定标题和侧边栏也可以根据您的要求更改属性

.ui.bottom {
    position: fixed;
    left: 20px;
    top: 84px;
    width: 100%;
    max-width: 229px;
    background: #000;
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
}
.ui.top {
    position: fixed;
    left: 0;
    right: 0;
     top:0;
    padding: 10px;
    box-sizing: border-box;
    background: #000;
    color: #fff;
    text-align: center;
}

Answer 3

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

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