我正在用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>
发布于 2018-06-05 05:06:18
将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%;
}
发布于 2018-06-05 05:08:18
将此代码添加到您的代码中,看看这是否可以解决问题
body {
margin:0;
padding:0;
}
发布于 2018-06-05 06:29:55
检查您的路由器插座是否包装在容器流体中,如果是,请根据您的喜好更改容器的流体css或移除包装div/容器
https://stackoverflow.com/questions/50688717
复制相似问题