无涯教程网

Html 将组件移动到页面底部 Angular

发布于06月30日

我已经在我的Angular 应用程序中创建了一个页脚组件，我希望像页脚一样将其"粘贴"到页面底部.我创建了一个页脚组件，并将其放入默认的app.component.html文件中(使其显示在屏幕上).

页脚显示在屏幕上，但它位于页面的最高位置.我试了两种不同的方法，让它粘在底部.

首先，我try 更新GLOBAL styles.css文件，在该文件中我 Select 了页脚组件，并try 将其移动到页面底部.

.app-footer{
    position:absolute;
   bottom:0;
}

接下来，我try 更改footer.component.css文件中的样式.

body {
    position:absolute;
   bottom:0;
}

两个都不走运.有谁能解释我的解决方案为什么无效，以及我如何才能正确地将页脚粘贴到页面底部？

推荐答案

您应该在父组件而不是页脚组件中设置类:

https://stackblitz.com/edit/angular-material-datepicker-tvxvqt?file=src%2Fapp%2Fapp.component.css个

TS:

<div class="app-wrapper">
  <app-footer class="footer"></app-footer>
</div>

样式:

.app-wrapper {
  height: 100%;
  margin: 0;
}

.footer {
  position: absolute;
  bottom: 0;
  background-color: green;
  width: 100%;
}

Html相关问答推荐

如何删除html原生对话框的宽度

如何使用html和css将两个项目垂直对齐

连续的相同 colored颜色单元格应位于同一列、网格框中

垂直页眉，每行只显示一个使用css的字母

如何在用css使用网格视图时设置宽度？

静态DIV的标签，显示从窗体输入的值

如何使 CSS 网格项目像 Flexbox 项目一样匹配父级的高度

如何使单选按钮在被 Select /选中时看起来像这样的设计？

我的 *ngFor 中的 array.reverse() 在生产中不起作用

即使必填字段为空，HTML 表单也已成功提交

jQuery 索引返回不正确的结果

拨动switch 在重新加载时未重置

使用 R 中的 rvest 包获取搜索结果的第一个链接

将 HTML 元素粘贴到容器底部，而不剪裁其顶部

在 html 邮箱的左侧和右侧制作多个元素很热门吗？

如何在 bootstrap 程序导航栏中居中搜索图标

变换元素以适应高度(Angular，SCSS)

为什么 `html` 上的 overflow： hidden 将滚动框移动到正文？

我可以将两个元素之间的所有空间都放在弹性框或网格中吗？

调整窗口大小时试图阻止按钮移动

实用课程推荐

相关教程推荐