Css 如何在Angular2应用程序中创建粘性页脚？

无论页脚有多少内容，粘性页脚都会粘在网页底部。如果在网页的CSS样式表中使用FlexBox命令，这是一个已解决的问题。所有现代浏览器都支持FlexBox

然而，使用Angular2构建web应用程序，我无法应用最简单的FlexBox命令！页脚不会粘到底部！这是我的

在plunker应用程序中，

style.css

包含一个非常简单的Flexbox命令，它可以工作-只需将

index.html

的内容替换为

index1.html

，就可以看到粘性页脚在没有角度的情况下是如何工作的。对于Angular2应用程序，我使用的是相同的

样式.css

，因此我在应用程序中添加了以下模板，清楚地标记了css类

main

和

footer

，如下所示

<div class="main">
  <h2>Hello {{name}}</h2>
</div>
<footer class="footer">
  <h3> this is footer </h3>
</footer>

你好{{name}
这是页脚

然而，页脚永远不会粘住

有人能用Angular2解决这个问题吗？Angular2是否有其他方法提供粘性页脚

---

任何想法和想法都将不胜感激。

在代码中包含页脚CSS

正文在这里。
版权信息

您的问题是，您正在将

站点

div定义为弹性容器，并将

页脚

作为弹性项，但当您引入angular

my app

元素时，

页脚

不再是

站点

的子元素（它是

我的应用程序

的孩子，因此是

网站

的孙子）

---

flex项必须是flex容器的子项。

您可以创建如下页脚组件：

@Component({
  selector: 'app-footer',
  templateUrl: './app-footer.component.html',
  styleUrls: ['./app-footer.component.scss']
})
export class FooterComponent implements  {

}

在app.component.html中，在router outler标记下添加页脚

    <div>
      <router-outlet></router-outlet>
      <app-footer></app-footer>
    </div>

您的建议存在一些问题（1）我正在特别寻找使用Angular2框架的解决方案。如果您查看我的plunker演示，您将看到flexbox CSS在Angular2应用程序中似乎没有效果。我正在寻找任何解决方案，只要它在Angular2应用程序中（2）你的页脚CSS有一个固定的高度。我需要页脚高度是动态的。使用我的plunker演示，如果你简单地用index1.html替换index.html的内容，我已经有了一个更好的解决方案。同样，我需要的是这个问题的Angular2解决方案。谢谢你的帮助。。啊，好的，谢谢@SimonFox！那么我可以在style.CSS如下？

myapp{minheight:100%；display:flex；flex direction:column；}

我将此添加到style.CSS中。此外，我在style.CSS中有以下内容。

html{height:100%；}

.main{flex:1；}

然而，页脚仍然没有粘性。它出现在正下方，在页脚和页面底部之间留下一个很大的空白。我成功地实现了这一点。我将

html{height:100%；}

修改为

html，正文{height:100%；}

。我认为这里甚至不需要html。感谢@Simon指出所有角度指令都是我的应用程序根指令的子指令。现在，我有了

子指令

子指令

和

，flexbox规则按预期工作。只需将

和

包装在

并不能解决当前的问题。在您的代码中，哪里可以保证页脚的粘性？关键是要知道如何设置CSS的样式，特别是通过使用flex CSS，而您在解决方案中没有显示这一点。无论如何，我已经解决了问题，但感谢您的帮助：）