HTML 产生空白

Question

我正在使用 Angular 2 和 PrimeNG 设计框架开发一个页面。在创建一个由菜单栏和内容部分组成的简单布局时，内容部分应放置在菜单下方并填充整个剩余空间。但是无论如何，正如您在图片上看到的那样，底部有一个缝隙，我无法解释为什么。

这是我的 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 和 body 标签中

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

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