这是我的 Angular 元素:
https://stackblitz.com/edit/angular-1g7bvn
我试过从 this example 获取粘性页脚无功而返:
html {
height: 100%;
font-family: sans-serif;
text-align: center;
}
body {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
}
header{
flex-shrink: 0;
background: yellowgreen;
}
.content {
flex: 1 0 auto;
background: papayawhip;
}
footer{
flex-shrink: 0;
background: gray;
}
一定有什么地方我做错了，但我看不到。
最佳答案
Angular 将您的组件呈现为标签，因此在您的情况下 my-app 组件是 DOM 树上的实际标签。
<body>
<my-app>
<header></header>
<section></section>
<footer></footer>
</my-app>
</body>
并且您的所有样式都应用于 body 标记。如果您使用 :host 选择器将 body 中的样式添加到您的 app.component.css - 它会工作得很好。
:host {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
}
这是一个 stackblitzz例子
关于html - 粘性页脚不适用于 Angular 5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54952346/