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

将margin:0添加到您的html和正文标记

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

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

Answer 2

将此添加到您的代码中，看看是否能解决问题

body {
margin:0;
padding:0;
}

Answer 3

检查您的路由器插座是否可能包裹在容器液体中，如果是，请根据您的喜好更换容器的流体css或移除包装div /容器