Question

我正在与Bootstrap 4一起在Angular 6应用程序上工作。我面临的问题是页脚后面有多余的空间，看起来很奇怪。我的app.component.html具有以下代码

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

应用程序页眉具有导航栏形式的内容，路由器出口根据路由URL保存动态内容。应用程序页脚具有以下页脚内容

<div style="text-align:center;background-color: rgb(209, 226, 230);">
  <br> 
  This is my footer
</div>

如果路由器出口内的动态内容较大，则页脚会完美地粘在底部，但是如果内容较小，则页脚会向上移动并在其下方留出多余的空间，这似乎是不可行的到任何标签。那么，这些额外的空间是从哪里来的？

Mathpaqs

Answer 1

修改后的答案：

您可以将min-height: 80vh设置为接触块，它将至少占据视口高度的80％ ，并且页脚将显示在屏幕底部。

原始答案：

如果希望页脚始终位于底部，则可以使用：

  position:absolute;
  bottom:0;

这是一个有效的示例：

footer{
  text-align: center;
  background-color: rgb(209, 226, 230);
  padding-top:1rem;
  position:absolute;
  bottom:0;
  right:0;
  left:0;
}

<div><h1>Contact Us</h1></div>
<footer>This is my footer</footer>

Answer 2

好吧，我尝试通过删除position：absolute并添加最小高度：80vh。这对我来说非常合适。这就是我想要的。因此，在这种情况下，vh或视口高度可以工作。

Angular应用程序中页脚后的附加空白

2 个答案: