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

Posted 2023-02-23

【中文标题】如何使用css修复侧边栏和标题

【英文标题】：How to make sidebar and header fixed using css

【发布时间】：2018-08-06 17:11:05

【问题描述】：

如何修复侧边栏？

我正在使用 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;

【参考方案1】：

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

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

【参考方案2】：

你可以试试这个代码，希望它对你有用。

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;

【讨论】：

这适用于标题，但对于侧边栏，它仍然被剪切。不过还是谢谢

在侧边栏中使用overflow: auto;

【参考方案3】：

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

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

【讨论】：

你能指定ui底部和ui顶部的位置吗？这些类是什么？

检查你的 div