angular 實現左側和頂部固定定位佈局

1 佈局基於angular ng-zorro組件庫實現 

   因爲項目中使用了組件庫而且要求響應式佈局，卡在這個坑上兩天，屢次調試後終於解決

   代碼僅供參考，因爲沒有上傳依賴的庫和組件包沒法直接運行，提供代碼參考

   示例樣式

       

   html代碼

       

<nz-layout class="container">
  <nz-sider  nzCollapsible [nzTrigger]="null" [(nzCollapsed)]="isCollapsed">
    <!-- <layout-sidebar ></layout-sidebar> -->
    <div>
      <ul nz-menu nzMode="vertical" nzTheme="dark" [nzInlineCollapsed]="isCollapsed">
          <li nz-submenu>
            <span title class="mainnav"><i [ngClass]="isCollapsed?'icon-daohangzhankai-':'icon-daohangshouqi-'" class="trigger iconfont " (click)="toggleCollapsed()"></i> <span>CRM</span></span>
            <ul>
                <li nz-menu-item>Option 1</li>
                <li nz-menu-item>Option 2</li>
            </ul>
          </li>
        </ul>
        <ul nz-menu [nzMode]="'inline'" nzTheme='dark' [nzInlineCollapsed]="isCollapsed">
          <!-- <li nz-menu-item >客戶管理</li> -->
          <li class="menulist" *ngIf="leveldisplay">客戶管理</li>
          <li nz-submenu> 
            <span title class="icont">
              <i class="iconfont icon-kehuliebiao"></i>
              <span>用戶列表</span>
            </span>
            <ul>
              <li nz-menu-item routerLink="/customer/detail" routerLinkActive="active">用戶詳情</li>
              <li nz-menu-item routerLink="/customer/OrderHistoryComponent" routerLinkActive="active">訂單歷史記錄</li>
              <li nz-menu-item routerLink="/customer/test" routerLinkActive="active">測試</li>
              <li nz-menu-item routerLink="/customer/billSummary" routerLinkActive="active">帳單彙總</li>
              <li nz-menu-item routerLink="/customer/billingDetails" routerLinkActive="active">帳單明細</li>
              <li nz-menu-item routerLink="/example/ui" routerLinkActive="active">組件樣式</li>
            </ul>
          </li>
          <li nz-menu-item  routerLink="/customer/verified" routerLinkActive="active">
            <span title class="icont">
              <i class="iconfont icon-chengshijinglitianchong" ></i>
              <span>實名認證</span>
            </span>
          </li>
          <li nz-menu-item  routerLink="/customer/blacklistHistory" routerLinkActive="active">
            <span title class="icont">
              <i class="iconfont icon-heimingdan" ></i>
              <span>黑名單</span>
            </span>
          </li>
          <li class="menulist" *ngIf="leveldisplay">管理維護</li>
          <li nz-menu-item  routerLink="/managementMaintenance/workList" routerLinkActive="active">
            <span title class="icont">
              <i class="iconfont icon-gongdanliebiao" ></i>
              <span>工單列表</span>
            </span>
          </li>
          <li nz-submenu> 
            <span title class="icont">
              <i class="iconfont icon-xiaoxi" ></i>
              <span>消息管理</span>
            </span>
            <ul>
              <li nz-menu-item routerLink="/managementMaintenance/messageManage/messageType" routerLinkActive="active">消息類型</li>
              <li nz-menu-item routerLink="/managementMaintenance/messageManage/messageRecord" routerLinkActive="active">發送記錄</li>
              <li nz-menu-item routerLink="/managementMaintenance/messageManage/noticeManage" routerLinkActive="active">公告管理</li>
            </ul>
          </li>
          <li nz-menu-item  routerLink="/managementMaintenance/quotaManagement" routerLinkActive="active">
            <span title class="icont">
              <i class="iconfont icon-yonghupeizhi" ></i>
              <span>配額管理</span>
            </span>
          </li>
        </ul>
    </div>
  </nz-sider>
  <nz-layout class="main">
    <layout-header class="alain-default__header"></layout-header>
    <nz-content  class="alain-default__content"><router-outlet></router-outlet></nz-content>
  </nz-layout>
</nz-layout>

  css  文件

/* 最外頭包裹層 */
.container{
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display:-webkit-flex;
    display: -ms-flexbox;
    display:flex;
}
/* 左側邊樣式 */
:host ::ng-deep .ant-layout-sider-children{
    overflow: auto;
    overflow-x: hidden;
    max-width: 200px;
    min-width: 80px;
    width:100%;
    height: 100%;
    position: fixed;  /* 固定定位 */
    left: 0;         /* 此處注意只設左邊 */
    margin-top:0px;
}
.ant-layout-sider{
    min-height:100vh;
}
.alain-default__aside{
    overflow: auto;
    width:100%;
    height: 100%;
}
.layout-fixed .alain-default__content {
    margin-top: 54px;
}
/* 內容樣式 */
.main{
    background:#fff; 
    padding:0;
    position: relative;   /*此處定位很關鍵，*/
    overflow: auto;
    height: 100%;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.alain-default__header{
    background-color:#001529;
    width: 100%;
    position:fixed;   
    top: 0;    /* 此處注意只設上邊邊 */
    left:auto;  /* 左側不可設置具體數值，否者沒法與左側定位對齊，會佔據整個屏幕 */
}
@media (min-width: 768px){
    .alain-default__content {
        margin-left: 21px;
        min-width:768px;
    }
}
/* sidebar樣式 */
:host ::ng-deep .trigger {
    font-size: 20px;
    line-height:40px;
    padding: 0 24px;
    cursor: pointer;
    transition: color .3s;
  }

  :host ::ng-deep .trigger:hover {
    color: #1890ff;
  }
  .mainnav span{
      font-size:18px;
      font-family:MicrosoftYaHei-Bold;
      font-weight:bold;

  }
  .ant-menu-inline-collapsed>.ant-menu-submenu .mainnav i{
    padding:0px;
}
.ant-menu-inline-collapsed>.ant-menu-submenu .mainnav span{
    max-width: 0;
    display: inline-block;
    opacity: 0;
}
  .icont i{
      font-size:23px;
      margin-right:17px;
  }
  .icont span{
    font-size:14px;
    font-family:MicrosoftYaHeiUI;
    color:#B3B4B6;
    text-align:left;
  }
  .ant-menu-item:hover span{
      color:#fff;
  }
.ant-menu-item-selected span{
      color:#fff;
  }
  .menulist{
    padding: 0 16px;
    font-size: 14px;
    line-height: 40px;
    height: 40px;
    margin-top: 4px;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding-left:24px;
    position: relative;
    display: block;
    white-space: nowrap;
  }
  .ant-menu-inline-collapsed>.ant-menu-item>.icont>span{
    max-width: 0;
    display: inline-block;
    opacity: 0;
}
.ant-menu-inline-collapsed>.ant-menu-submenu .icont span{
    max-width: 0;
    display: inline-block;
    opacity: 0;
}

  3此處附寫的小demo一個，可直接粘貼運行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         /*最父層，可無此項*/
        #framerPar {
            padding-left:0; 
            height: 100%; 
            width: 100%;
        }
        /*框架容器*/
        #framerParCon {
            height: 100%;
            display: -webkit-box;
            display: -moz-box;
            display:-webkit-flex;
            display: -ms-flexbox;
            display:flex;
    
        }
        /*左側容器導航*/
        #framerLeft {
            height: 100%; 
            background-color: #197DE7;
            overflow: auto;
            overflow-x: hidden;
            max-width: 200px;
            min-width: 50px;
            position:fixed;
        }
        /*右側容器*/
        #framerRight {
            padding:0;
            position: relative;
            overflow: auto;
            height: 100%;
            margin-left: 88px;
            -webkit-flex: 1;
            -moz-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }
        /*右側容器上導航*/
        #framerRightTop {
            width: 100%;
            position:fixed;
            top: 0;
            /*left: 0;*//*重點不用設置，會自動隨着左邊寬度變小而改變，爲默認值 auto */
        }
        /*右側容器下內容區域*/
        #framerRightBot {
            width: 100%;
            height: 100%;
            padding-top: 60px;
            overflow: auto;
            /*margin-top: 50px;*/
        }
    </style>
</head>
<body>
    <div id="framerPar">
        <div id="framerParCon">
            <!-- 左邊側導航 -->
            <div id="framerLeft">
                <ul>
                    <li>右導航</li>
                    <li>右導航</li>
                    <li>右導航</li>
                    <li>右導航</li>
                    <li>右導航</li>
                    <li>右導航</li>
                </ul>
            </div>
            <!-- 右邊容器 -->
            <div id="framerRight">
                <!-- 右邊上導航 -->
                <nav id="framerRightTop">
                    <ul>
                        <li>上導航</li>
                    </ul>
                </nav>
                <div id="framerRightBot">
                   <div style="height:2000px;width:100%;">我是內容我能動</div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>