[英]Materialize-css Sticky Footer in Angular
Materialize-css sticky footer utility doesn't work 'out of the box' with Angular. Materialize-css 粘性页脚实用程序无法与 Angular 一起“开箱即用”。 Even with the modifications to the css file recommended by the documentation.
即使对文档推荐的 css 文件进行了修改。
The documentation suggests the following classes should be edited as follows:该文档建议应按如下方式编辑以下类:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
The solution is to add > app-root
after body
.解决方案是在
body
之后添加> app-root
。
The edits should look like this:编辑应如下所示:
body > app-root {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
These will need to be changed in the materialize.css file, and will need to be placed in styles.css .这些需要在materialize.ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ 文件中进行更改,并且需要放在styles.css中。
The last step is to add <main> </main>
around the body of your content.最后一步是在内容主体周围添加
<main> </main>
。
I place it around the router outlet so my app.component.html looks like this:我把它放在路由器插座周围,所以我的 app.component.html 看起来像这样:
<app-header></app-header>
<main>
<router-outlet></router-outlet>
</main>
<app-footer></app-footer>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.