如何解决对于<router-outlet>
我用Angular创建一个Web应用程序。我想在页面底部创建一个页脚。如果页面的内容很小,则页脚仍将位于页面底部,而不是页面中间。
为此,我编写了代码以将<router-outlet>
指令的内容向下推入页面。但不幸的是,它不起作用。
这是我在CSS中的代码(来自styles.css文件的代码):
#portal-wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
router-outlet {
flex-grow: 1;
}
app-menu,router-outlet,app-footer {
flex-shrink: 0;
}
这是我的app.component.html文件的内容:
<div id="portal-wrapper">
<app-menu></app-menu>
<div id="portal">
<div class="container">
<router-outlet></router-outlet>
<div class="row">
<app-footer></app-footer>
</div>
</div>
</div>
</div>
从理论上讲,应将内容下推(更确切地说是其下的空白),以便页脚位于页面底部。 flex-grow: 1;
的{{1}}有效,并将<app-menu>
向下推。为什么<router-outlet>
不能将页脚压低?
解决方法
带有
portal-wrapper
的 div有两个子元素,即<app-menu>
和div portal
,当将portal-wrapper
放入flexbox时,只能将flex-grow: 1
用于其子元素。
flex-grow: 1;
for<app-menu>
的工作原理是将<router-outlet>
向下推。
实际上是将div portal
向下推而不仅仅是<router-outlet>
您应将div container
放入flexbox并将flex-grow: 1
添加到<router-outlet>
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。