Question

我正在尝试设置页面顶部带有固定标题的网页，并在标题下方堆叠两个网格。我希望顶部网格占据标题下方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。希望这能更好地解释我的情况。我很感激你的帮助!!

Answer 1

简单方法：

1）增加零利润率填充：

html,body{
  height:100%;
  overflow:hidden;
  margin: 0;
  padding: 0;
}

2）在包装中替换高度：

.wrapper{
  position:relative;
  height:calc(100% - 85px);
  top:85px;
}

3）将边框设置为0。

具有相对高度的响应div布局

1 个答案: