Как сделать этот раздел на всю высоту экрана?Что бы мы ни делали, это оставляет пустое пространство на дне

Question

Мы пытаемся сделать содержимое на всю высоту экрана, но что бы мы ни делали, оно показывает пустое пространство внизу экрана. Как это можно исправить?

section {
  height: 100vh;
  background-size: cover;
  background: #FF512F;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FF512F, #DD2476);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FF512F, #DD2476);
  padding-top: 5%;
  /* New code */
  overflow: hidden;
  padding-top: 80px;
  margin-top: -100px;
  height: 150%;
}

.emp-profile {
  padding: 10%;
  border-radius: 0.5rem;
  background: #fff;
  margin-top: 80px;
  margin-bottom: 80px
}

<section *ngIf="user" (onlineUsers)="online($event)">
  <div class="container">
    <div class="emp-profile justify-content-center">
      ... ...
    </div>
  </div>
</section>

Я не могу использовать тег body, потому что это отдельный угловой компонент, который начинается с раздела.

Как я могу сделать этот раздел на всю высоту экрана? Мы используем Bootstrap 4 с Angular 6

Answer 1

В разделе есть отрицательное поле. Это перемещает весь раздел на 150 пикселей. Также не определяйте высоту дважды в CSS. Каково бы ни было отрицательное поле, оно должно быть добавлено обратно к высоте ...

section {
    height: calc(100vh + 80px);
    background-size: cover;
    background: #FF512F; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #FF512F, #DD2476); 
    background: linear-gradient(to right, #FF512F, #DD2476);
    padding-top: 80px;
    margin-top: -80px;
}

https://www.codeply.com/go/BdVBClITv0

Answer 2

добавлено 100vh и удалено margin и padding section

section {
  height: 100vh;
  background-size: cover;
  background: #FF512F;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FF512F, #DD2476);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FF512F, #DD2476);
  /* New code */
  overflow: hidden;
  height: 100vh;
}

.emp-profile {
  padding: 10%;
  border-radius: 0.5rem;
  background: #fff;
  margin-top: 80px;
  margin-bottom: 80px
}

body {
  margin: 0;
  padding: 0
}

<section *ngIf="user" (onlineUsers)="online($event)">
  <div class="container">
    <div class="emp-profile justify-content-center">
      ... ...
    </div>
  </div>
</section>