Дополнительные пробелы после нижнего колонтитула в угловом приложении

Question

Я работаю над приложением Angular 6 вместе с начальной загрузкой 4. Проблема, с которой я сталкиваюсь, заключается в наличии дополнительного пробела после нижнего колонтитула, и это выглядит очень странно.Мой app.component.html имеет следующий код:

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

Заголовок приложения имеет содержимое в форме navbar, а выход маршрутизатора содержит динамическое содержимое в соответствии с URL-адресами маршрутизации. Нижний колонтитул приложения имеет нижний колонтитулсодержимое, как показано ниже

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

Если динамическое содержимое внутри розетки маршрутизатора больше по размеру, нижний колонтитул идеально прилипает к нижней части, но если содержимое небольшого размера, нижний колонтитул перемещается вверх и оставляет дополнительное пространство подэто, кажется, не из-за каких-либо тегов.Так откуда же взялся этот дополнительный пробел?

Answer 1

Хорошо. Я попытался удалить положение: абсолютное и добавить минимальную высоту: 80Вч.И это прекрасно работает для меня. Это то, что я искал. Так что высота vh или области просмотра работает в этом случае.

Answer 2

Отредактированный ответ:

Вы можете установить min-height: 80vh для своего блока контактов, таким образом, он будет занимать как минимум 80% от высоты viewport и нижний колонтитул появится в нижней части экрана.

---

Оригинальный ответ:

Если вы хотите, чтобы нижний колонтитул всегда был внижняя часть, которую вы можете использовать:

  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>