我正在尝试设置一个网页，该网页在页面顶部具有固定的标题，并且在标题下方相互堆叠的两个网格。我希望顶部网格占据标题下方的75％的空间，而底部网格应占据其余25％的空间。在垂直调整浏览器窗口大小时，应考虑这些相对高度。我不想在页面上进行任何滚动，并且底部网格不应从窗口溢出。
我的html，css看起来像这样：
<body>
<div class="header">Header</div>
<div class="wrapper">
<div class="panel-top">
Master Grid
</div>
<div class="panel-bottom">
Summary Grid
</div>
</div>
</body>
html,body{
height:100%;
overflow:hidden;
}
.header{
position:fixed;
border:1px solid red;
min-height:85px;
width:100%;
z-index:9999;
}
.wrapper{
position:relative;
height:100%;
top:85px;
}
.panel-top{
height:75%;
background:white;
border:1px solid black;
}
.panel-bottom{
height:25%;
border:1px solid blue;
/* bottom:10px; */
}
我在这里创建了一个plunkr-http://plnkr.co/edit/uTPpyjDe5dpuymWICT90?p=preview。希望这可以更好地解释我的情况。我将不胜感激！
最佳答案
这样做的简单方法：
1）添加零边距和填充：
html,body{
height:100%;
overflow:hidden;
margin: 0;
padding: 0;
}
2）更换包装纸的高度：
.wrapper{
position:relative;
height:calc(100% - 85px);
top:85px;
}
3）将边界设置为0。