我正在使用 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>
最佳答案
将 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%;
}
关于HTML 产生空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50688717/