首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML生成空格

HTML生成空格
EN

Stack Overflow用户
提问于 2018-06-05 05:01:44
回答 3查看 75关注 0票数 0

我正在用Angular 2和PrimeNG设计框架开发一个页面。而创建一个由菜单栏和内容部分组成的简单布局时,应将其放置在菜单下方,并填充整个剩余空间。但不管怎样,正如你在图片上看到的那样,底部有一个缺口,我不能解释为什么。

这是我的HTML代码

代码语言:javascript
复制
#siteContainer {
  height: 100%;
  width: 100%;
  display: table-row;
}

#menuContainer {
  display: table-row;
}

#p-tabView {
  height: 100%;
}
代码语言:javascript
复制
<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>

EN

回答 3

Stack Overflow用户

发布于 2018-06-05 05:06:18

margin:0添加到html和body标记中

代码语言:javascript
复制
<style>
    html, body{
      margin: 0;
    }

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

Stack Overflow用户

发布于 2018-06-05 05:08:18

将此代码添加到您的代码中,看看这是否可以解决问题

代码语言:javascript
复制
body {
margin:0;
padding:0;
}
票数 1
EN

Stack Overflow用户

发布于 2018-06-05 06:29:55

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50688717

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档