问题描述
我用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>
。