文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >角材料固定侧杆头不固定

问角材料固定侧杆头不固定
EN

Stack Overflow用户
提问于 2019-02-05 05:24:47
回答 3查看 1.8K关注 0票数 1

我试着装角材料固定侧导航，但是我在我的项目中遇到了一些冲突，我的问题是边栏标题不固定，我添加了内容细节并滚动内容，然后标题被隐藏，

这里的堆栈闪电码

我怎样才能解决这个问题请帮我解决这个问题

谢谢。

我的代码

sidenav-fixed-example.html

代码语言：javascript
运行
复制
 <mat-toolbar class="example-header">Header</mat-toolbar>

  <mat-sidenav-container class="example-container">
    <mat-sidenav #sidenav mode="side" opened class="example-sidenav">
    <mat-nav-list>
      <!-- Sidebar -->
      <ul class="sidebar navbar-nav" >
        <div class=" fixed-search " >
          <div class="sidebar-date-and-time">


      <span class="side-mnu" routerLink='/home'>
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-home"></i></div>
           <div class="p-2 bd-highlight txt-sm">Home</div>
              </div>
                 </span>


            <span class="side-mnu-active"  routerLink='/categories'>
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-clipboard-list"></i></div>
           <div class="p-2 bd-highlight txt-sm">Categories</div>
              </div>
                 </span>



            <span class="side-mnu" routerLink='/customerdetails'>
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-users"></i></div>
           <div class="p-2 bd-highlight txt-sm ">Customers</div>
              </div>
                 </span>


            <span class="side-mnu" routerLink='/orderdetails'>
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-shopping-bag"></i></div>
           <div class="p-2 bd-highlight txt-sm">Orders</div>
              </div>
                 </span>




            <span class="side-mnu">
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-clipboard-check"></i></div>
           <div class="p-2 bd-highlight txt-sm">Sales Items</div>
              </div>
                 </span>




            <span class="side-mnu">
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-bullhorn"></i></div>
           <div class="p-2 bd-highlight txt-sm">Announcements</div>
              </div>
                 </span>

          </div>


        </div>
        <!--side bar-->

      </ul>

    </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content >

     Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.
    </mat-sidenav-content>
  </mat-sidenav-container>

  <mat-toolbar class="example-footer">Footer</mat-toolbar>

.css

代码语言：javascript
运行
复制
.example-container {
  position: absolute;
  top: 60px;
  bottom: 60px; height: 100%;
  left: 0;
  right: 0;
}

.example-sidenav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  background: rgba(255, 0, 0, 0.5);
}

.example-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.example-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
angular-material
angular6
angular
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-02-05 10:22:10

正如@Deepu在他的回答中所指出的，添加z-index:2将确保header保持在sidenav的顶部。

但是，如果sidenav中的链接超出了它所能容纳的范围，就会产生问题。因此，在设置sidenav时，计算z-index的高度是一个更好的选择。

要实现它，只需在height: calc(100% -120px);类中添加.example-container。我从100%高中扣除120‘m，因为这是页眉高度和页脚高度之和。

这里是工作的stackblitz 演示和代码链接。

票数 2
EN

Stack Overflow用户

发布于 2019-02-05 05:38:10

您必须设置fixedInViewPort属性。

[fixedInViewport]="true"

代码语言：javascript
运行
复制
<mat-sidenav #sidenav mode="side" opened class="example-sidenav"  [fixedInViewport]="true" >
票数 1
EN

Stack Overflow用户

发布于 2019-02-05 06:16:52

将z-index值作为类example-header的2给出

代码语言：javascript
运行
复制
.example-header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 2;
}

stackblitz链路

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/54528120

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档