Angular flex布局挑战
我有一个使用angular flex和angular flex-layout的Angular应用程序(v6.1)。我正在使用angular v6.1来利用片段滚动特性。我的页面有一个工具栏，带有指向页面内片段的链接的侧边导航和一个中心内容(见下图)。我的要求是让工具栏和左侧导航固定，而中间的内容应该单独滚动。下面是我的app.component.html。有了这个html，整个页面都会滚动，而不仅仅是中心内容。我如何才能达到期望的行为？
app.component.html
<div fxLayout="column">
<div fxFlex="20%" fxFlexFill style="background-color: rgb(48, 138, 133); ">
<mat-toolbar color="primary">
<mat-toolbar-row fxLayoutGap="10px">
<a type="button" href="#one">Menu item #1</a>
<a type="button" href="#two">Menu item #2</a>
</mat-toolbar-row>
</mat-toolbar>
</div>
<div fxFlex="80%">
<div fxLayout="row" style="background-color: cadetblue">
<div fxFlex="20%" fxLayout="column" style="background-color: chocolate">
<a mat-button routerLink="./" routerLinkActive="active" fragment="one">Nav Link #1</a>
<a mat-button routerLink="./" routerLinkActive="active" fragment="two">Nav Link #2</a>
<a mat-button routerLink="./" routerLinkActive="active" fragment="three">Nav Link #3</a>
<a mat-button routerLink="./" routerLinkActive="active" fragment="four">Nav Link #4</a>
<a mat-button routerLink="./" routerLinkActive="active" fragment="five">Nav Link #5</a>
</div>
<div fxLayout="column" fxLayoutGap="100px" fxFlex="100%"
style="background-color: chartreuse;">
<p id="one">para 1</p>
<p id="two">para 2</p>
<p id="three">para 3</p>
<p id="four">para 4</p>
<p id="five">para 5</p>
<p id="six">para 6</p>
<p id="seven">para 7</p>
<p id="eight">para content 8</p>
</div>
</div>
</div>
</div>
回答 2
Stack Overflow用户
发布于 2019-01-06 06:40:55
好吧。要使其工作，您需要做一些事情。
首先，你需要确保你的身体有100%的高度。否则，当一个元素被赋予100%的高度时，它就不会知道"100%是什么“，只会像它想要的那样增长。
您想要的下一件事是在几个地方添加此样式：height: 100%; overflow: auto。上面写着“元素填充它的父元素，如果内容变得更大，就让内容可滚动”。具体地说，将这些样式添加到两个内部列中。
Stack Overflow用户
发布于 2019-01-05 17:10:56
完成所需操作的最佳方法之一是将sidenav和工具栏创建为单独的组件，并在主体(绿色区域)中渲染子组件，如下所示
<header role="mast-head">
<div class="container-fluid">
//Your header will come here
</div>
</header>
<div class="side bar">
<ul>
<li routerLinkActive="active" [routerLink]="['/homepage/h']"><a href="javascript:"><img src="" alt="" />Dashboard</a></li>
<li routerLinkActive="active" [routerLink]="['/homepage/dst']"><a href="javascript:"><img src="" alt="" />A</a></li>
<li routerLinkActive="active" [routerLink]="['/homepage/j']"><a href="javascript:"><img src="" alt="" />B </a></li>
</ul>
</div>
<div class="body">
<router-outlet >
</router-outlet>
</div>https://stackoverflow.com/questions/54050496
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号