Question

好吧，我尝试了很多可能的解决方案和方法（使用flexbox，position等）。在渲染容器组件之前，无法将页脚组件放在底部。我已经为异步数据准备了一个旋转加载程序，下面是页脚。因此，同时查看页脚和微调框确实很丑陋。我想将页脚始终放在底部（不固定）而看不到。我一直在阅读和测试-> How do you get the footer to stay at the bottom of a Web page?，但是我没有解决方案。

// app.component.html

<app-header></app-header>
<app-planet-data></app-planet-data>
<app-footer></app-footer>

// footer.component.html

<nav class="navbar navbar-dark bg-dark">
    <h6 class="m-2 mx-auto text-muted">Footer</h6>
</nav>

// header.component.html

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
    <h3 class="m-2">The Red Planet Rovers</h3>
    <ul class="nav justify-content-end">
        <button pButton type="button" label="Image of the Day"></button>
        <button pButton type="button" label="Image Gallery"></button>
      </ul>
</nav>

// planet-data.component.html

<app-loading *ngIf="loading"></app-loading>
<app-planet-view [pics]="pics"></app-planet-view>
<app-planet-view [pics]="pics"></app-planet-view>
<app-planet-view [pics]="pics"></app-planet-view>

Answer 1

您将在网页中拥有页眉和页脚之间的主要内容。在此主要元素上应用此CSS，您将完成：

#main-component {
    min-height: calc(100vh - 70px - 100px);
}

这里70是内容的高度+填充+标头的边距。而100是内容的高度+填充+页脚的边距。

仅当页眉和页脚大小固定时，此解决方案才有效。

呈现内容之前页脚出现问题

1 个答案: