Проблема с нижним колонтитулом перед отображением содержимого

Question

Ну, я перепробовал множество возможных решений и способов (используя flexbox, position и т. Д.).Я не могу поместить свой компонент нижнего колонтитула в нижнюю часть ДО визуализации компонента контейнера.У меня есть загрузчик блесна, наблюдающий за асинхронными данными, и ниже - нижний колонтитул.Так что действительно ужасно смотреть на нижний колонтитул и счетчик вместе.Я хотел бы всегда размещать нижний колонтитул внизу (не фиксированный), чтобы его не было видно.Я читал и тестировал -> Как заставить нижний колонтитул оставаться внизу веб-страницы? , но для меня не было решения.

// 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 - высота содержимого + отступ + поле нижнего колонтитула.

Это решение будет работать только в том случае, если размер верхнего и нижнего колонтитулов фиксирован.