Question

这是我的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; 
}

肯定有些小事情我做错了，但我看不到。

Answer 1

Angular将组件呈现为标签，因此在您的情况下，my-app组件是DOM树上的实际标签。

<body>
  <my-app>
    <header></header>
    <section></section>
    <footer></footer>
  </my-app>
</body>

您所有的样式都将应用于body标签。如果您使用app.component.css选择器将body中的样式添加到:host中，它将很好用。

:host {
  display: flex;
  flex-direction: column;
  height: 100%;    
  margin: 0;
}

这是一个stackblitzz示例

Answer 2

在下方添加到您的CSS。

footer{
  position: fixed;
  bottom: 0; 
}

StackBlitz

粘性页脚不适用于Angular 5

2 个答案: