我正在尝试设置一个网页，该网页在页面顶部有一个固定的标题，两个网格在标题下方相互堆叠。我希望顶部网格占据标题下方 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。
关于html - 具有相对高度的响应式 div 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26389351/