css - Materialise CSS 和 Angular 5 - 粘性页脚

标签 css angular materialize

当页面内容未到达屏幕末尾时,我试图让我的页脚粘在底部。

我正在构建 Angular 5 应用程序。

我添加了 <header> , <main><footer>标记到我的 app.component.html .

我尝试在各处添加来自 Materialise 的所需 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>

app-footer以此开头:

<footer class="page-footer blue darken-2">

我想知道将我的页脚转到页面底部所需的 css 放在哪里。

最佳答案

一个快速的答案是将 FooterComponent 中的 html 放在 index.html 中。 用标签包围你的标签,就像这个例子:

<body>

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

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

</body>

(记得删除 FooterComponent 中的 html)

关于css - Materialise CSS 和 Angular 5 - 粘性页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49327669/

相关文章:

html - 如何水平居中此警报?

javascript - Hello World phonegap 应用程序崩溃

javascript - 使用 RXJS 进行搜索输入,该输入进行 API 调用,但订阅会重复发生,即使使用 debounceTime

angular - 当解析在 Angular 5 中没有返回数据时停止路由更改

javascript - Materialize CSS Sidenav 根据表单导航选择加载内容

css - 导航栏样式有问题

javascript - 在 javascript 而不是 CSS(悬停)中更改链接颜色 --- 在 jsfiddle 而不是浏览器中有效?

html - 从 outlook 中删除带下划线的 gmail 超链接

javascript - 将 Angular 添加到现有的 CodeIgniter 项目

javascript - 如何从 Materialise 的开关中获取值?