Angular Flex 布局总是显示滚动条
Posted
技术标签:
【中文标题】Angular Flex 布局总是显示滚动条【英文标题】:Angular Flex Layout Always shows scrollbar 【发布时间】:2019-07-31 14:27:30 【问题描述】:我是 angular 和 flex 布局的新手。我的页面非常简单。带有侧面导航栏和路由器插座的标题。
我遇到了我的页面总是显示滚动条的问题。
如果我删除 fxFlexFill,滚动条不会显示。我该如何解决这个问题?
这里是 stackblitz 演示 Stackblitz
这是我的模板:
.fill-space
flex: 1 1 auto;
.content
flex: 1 1 auto;
padding: 15px;
position: relative;
overflow-y: auto;
.footer
display: flex;
flex: 1 0 auto;
justify-content: center;
<div style="height: 100vh;">
<mat-toolbar color="primary" class="fixed-header">
<mat-toolbar-row>
<button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
<mat-icon>menu</mat-icon>
</button>
<span><button mat-button routerLink="/home"><h3>HOSPITALITY</h3></button></span>
<span class="fill-space"></span>
<div fxShow="true" fxHide.lt-md="true">
<button mat-button routerLink="/home">HOME</button>
<button mat-button routerLink="/account">MY ACCOUNT</button>
<button mat-button routerLink="/login">LOGOUT</button>
<a href="#" routerLink="/cart" mat-button>
<mat-icon>shopping_cart</mat-icon>
0
</a>
</div>
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container fxFlexFill>
<mat-sidenav #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
<div fxLayout="column">
<button mat-button routerLink="/home">HOME</button>
<button mat-button routerLink="/account">MY ACCOUNT</button>
<button mat-button routerLink="/login">LOGOUT</button>
<a href="#" routerLink="/cart" mat-button>
<mat-icon>shopping_cart</mat-icon>
0
</a>
<a (click)="sidenav.toggle()" mat-list-item>
<mat-icon>close</mat-icon> Close
</a>
</div>
</mat-sidenav>
<mat-sidenav-content >
<div class="content">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
【问题讨论】:
【参考方案1】:主要问题是侧导航通过 fxFlexFill 指令获得 100vh 的高度。
你需要考虑到mat-toolbar-row
的高度,比如通过CSS计算(他的效果还有其他方法,看你怎么struct页面布局)
另外,body 有一个 8px 的边距,从浏览器默认样式开始。
Here is a fork of Stackblitz
【讨论】:
margin:0 没有帮助。我是否需要 npm install normalize.css 以及它如何帮助解决我的问题。 每个浏览器都有自己的基本样式。 margin:0 通过删除默认的 8px 边距解决了问题代码 sn-p 处的问题。也许还有其他全局样式在您的项目中生效。 我使用的唯一其他样式是角材料中的预建主题。除此之外没有其他款式 你能创建一个包含所有样式的演示吗? 这里是stackblitz示例stackblitz.com/edit/angular-mbp7rq以上是关于Angular Flex 布局总是显示滚动条的主要内容,如果未能解决你的问题,请参考以下文章
elementui el-tree组件flex布局出现横向滚动条