时间戳

首页 > 解决方案 > 粘性页脚不适用于 Angular 5

html - 粘性页脚不适用于 Angular 5

问题描述

这是我的 Angular 项目：

https://stackblitz.com/edit/angular-1g7bvn

我已经尝试从这个示例中获取粘性页脚，但无济于事：

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; 
}

一定有什么小东西我做错了，但我看不到。

标签： htmlcssangular

解决方案

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示例

推荐阅读