Angular 应用程序中页脚后的额外空白答案

【问题标题】：Additional white Space after Footer in Angular applicationAngular 应用程序中页脚后的额外空白
【发布时间】：2019-01-01 15:33:13
【问题描述】：

我正在开发一个 Angular 6 应用程序和 bootstrap 4。我面临的问题是我的页脚后面有一个额外的空间，这看起来很奇怪。我的 app.component.html 的代码如下

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

app-header 有导航栏形式的内容，router-outlet 根据路由 url 保存动态内容。app-footer 有如下页脚内容

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

如果路由器插座中的动态内容更大，页脚会完美地粘在底部，但如果内容很小，页脚会向上移动并在其下方留下一个额外的空间，这似乎不会到期到任何标签。那么这个额外的空间是从哪里来的呢？

【问题讨论】：

【解决方案1】：

好的，我尝试删除位置：绝对并添加最小高度：80vh。这对我来说非常有效。这就是我一直在寻找的。所以 vh 或视口高度在这种情况下有效。

【讨论】：

【解决方案2】：

修改后的答案：

您可以将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>

【讨论】：

首先感谢您的快速回复。这适用于联系我们页面（我的页脚在我的页面底部移动），但我的主页有一个接一个的 3 个轮播滑块，现在我的页脚与主页的第一个轮播重叠（位置:absolute 是我们在 css 中定义的）。如果我使用 (position:relative) 我的主页可以正常工作，但再次联系我们时页面页脚向上移动。所以在这两种情况下，一个都会受到损害。
你知道，你看到的是相对于你的窗口大小，移动用户会看到底部的页脚，而屏幕非常大的用户会看到请参阅屏幕截图中的页脚。也许您想要做的是为您的联系人块设置一个min-height: 80vh，因此它将占据至少 80% 的 视口高度，并且页脚将出现靠近屏幕底部。（如果您这样做，请删除 position:absolute。）
好的，我尝试删除位置：绝对并添加最小高度：80vh。这对我来说非常有效。这就是我一直在寻找的。所以 vh 或视口高度在这种情况下有效。非常感谢。