Шаблон Angular 7 не заполняет всю страницу

Question

Итак, я пытаюсь преобразовать эту HTML-страницу в свой угловой проект. Это работает нормально, но когда я иду на угловой, он не заполняет всю страницу. Вот пример стекаблица, это то, что я вижу.

https://stackblitz.com/edit/angular-y8tdkt

Запустите угловой просмотр в новом окне.

Answer 1

В вашем коде вы устанавливаете тело для отображения flex, это вызывает проблему, если вы удалите display: flex из body везде, где выустанавливаем это, экран будет заполняться полностью, в отношении высоты.

Я не могу понять, где вы его устанавливаете, но чтобы показать, что это так, добавьте следующее, чтобы увидеть экран в полный рост,(в style.css).

body {
  display: unset!important;
}

---

Правка - найдена проблема

Обнаружена в (style.css) строке 9622, это вызывает вашупроблема.

body {
  position: relative;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  font-family: "Montserrat",sans-serif;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

Здесь display: flex удалите его, и страница, не заполняющаяся, больше не будет проблемой.

Answer 2

У вас col-md-6 с совой каруселью слева.

замените это на col-md-3, и hello world col-md-6 будет в центре на полном экране.

Answer 3

Ну, ваш основной раздел содержит

<div class="col-md-6 d-none d-lg-block">...</div>
<div class="col-lg-6 h-100">...</div>

Таким образом, как только экран становится достаточно большим, первый div, который не отображался из-за d-none, отображается из-за d-lg-block, и, таким образом, страница делится пополам.