具体化CSS&；角形5-粘性页脚_Css_Angular_Materialize

具体化CSS&；角形5-粘性页脚

css angular

具体化CSS&；角形5-粘性页脚,css,angular,materialize,Css,Angular,Materialize,当页面内容未到达屏幕末端时，我试图将页脚粘到底部我正在构建一个Angular 5应用程序我将、和标记添加到我的app.component.html 我尝试从MaterializeEverywhere添加所需的css。在全局css文件中，app.component css文件，甚至在Materialize css中。我只是不知道我做错了什么这是我的app.component.html： <header> <app-navbar></app-navbar&

当页面内容未到达屏幕末端时，我试图将页脚粘到底部

我正在构建一个Angular 5应用程序

我将

、

和

标记添加到我的

app.component.html

我尝试从MaterializeEverywhere添加所需的css。在全局css文件中，app.component css文件，甚至在Materialize css中。我只是不知道我做错了什么

这是我的

app.component.html

：

<header>
    <app-navbar></app-navbar>
</header>
<main>
    <div class="container">
        <router-outlet></router-outlet>
    </div>
</main>
<app-footer></app-footer>

我想知道在页面底部放置页脚所需的css的位置。

一个快速的答案是将页脚组件中的html放在index.html中。用标记环绕您的标记，如以下示例所示：

<body>

  <main>
    <app-root></app-root>
  </main>

  <footer>
    <!-- your footer html here -->
  </footer>

</body>

（记住删除FooterComponent中的html）

在AppComponent.html中：

<app-navbar></app-navbar>

<main>
    <div class="row">
        <router-outlet></router-outlet>
    </div>
</main>

<app-footer></app-footer>

大卫·奥尔蒂斯的回答对我有用！但是
应该注意的是，块：

body > app-root { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column;
}
main { 
    flex: 1 0 auto;
}

必须放置在站点范围的

styles.css文件中才能工作。您可以共享您的css吗。我使用了来自的css，并且能够解决问题。我使用了相同的css。这就是在Materialize页脚页面上提到的CSS。我只是不知道该把它放在哪里。虽然我认为当我把它放在全局文件中时，它应该是有效的。。。
body > app-root { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column;
}
main { 
    flex: 1 0 auto;
}

body > app-root { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column;
}
main { 
    flex: 1 0 auto;
}