HTML создает пустое пространство

Question

Я разрабатываю страницу с Angular 2 и PrimeNG Design Framework.При создании простого макета, состоящего из строки меню и части содержимого, которая должна располагаться под меню и заполнять все оставшееся пространство.Но в любом случае на дне есть щель, как вы можете видеть на картинке, и я не могу объяснить, почему.

А это мой HTML - код

#siteContainer {
  height: 100%;
  width: 100%;
  display: table-row;
}

#menuContainer {
  display: table-row;
}

#p-tabView {
  height: 100%;
}

<div id="siteWrapper" style="min-height: 100%; width: 100%; display: table">
  <!-- Top Menu Bar -->
  <div id="menuContainer">
    <app-skeleton></app-skeleton>
  </div>
  <!--Container for site content-->
  <div id="siteContainer">

    <p-tabView id="tabView" orientation="bottom">
      <div id="tabPanelContainer">
        <p-tabPanel>
          <!--tabbody-->
          <p-card>
            <app-display-widgets style="{border: #7A7A7A 2em solid;}" *ngIf="sheet.id === refreshCurrentSheet()" [dashboardID]="dashboard.id"></app-display-widgets>
          </p-card>
        </p-tabPanel>
      </div>
    </p-tabView>

  </div>
</div>

Answer 1

добавьте это в свой код, посмотрите, решит ли это проблему

body {
margin:0;
padding:0;
}

Answer 2

Убедитесь, что выход вашего маршрутизатора обернут в контейнерную жидкость, и если это так, либо измените css жидкости контейнера по своему вкусу, либо удалите упаковочный блок / контейнер

Answer 3

Добавьте margin:0 к вашему тегу html и body

<style>
    html, body{
      margin: 0;
    }

    #siteContainer {
      height: 100%;
      width: 100%;
      display: table-row;
      background: blue;
    }
    #menuContainer{
      display: table-row;
    }
    #p-tabView {
      height: 100%;
    }