javascript - 删除 div 之间的垂直空白，尤其是在遇到断点之后

Question

我目前正在设计一个响应式页面，我遇到了 div 之间的空白问题，尤其是在遇到断点之后。

body, html {
  padding: 0;
  margin: 0;
}
.header {
  padding-top: 5px;
  background-color: red;
  width: 100%;
}
.sub-header {
  padding: 5px;
  margin: 0px;
  background-color: yellow;
  width: 100%;
}
.main-content {
  padding: 5px;
  background-color: blue;
  width: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  padding: 5px;
  background-color: green;
  width: 100%;
}
@media screen and (max-width: 320px) {
  .sub-header {
    display: none;
  }
}
}

<div class="header">Header
  <div class="sub-header">Sub-Header</div>
</div>
<div class="main-content">Auto adjust size</div>
I want to have the blue div take up the remaining         space in this white space, as well as after the sub-header is removed at the break point.
<div class="footer">footer</div>

这是我正在经历的一个快速模型:http://jsfiddle.net/gaych7vp/6/

我明白我必须做些什么才能让它在遇到断点之前占据剩余的空白空间(我假设只是调整高度值)，但我将如何制作蓝色 div占用断点后隐藏黄色 div 时创建的剩余空白区域？

我对 javascript 仍然很陌生，但从我读过的其他答案来看，可以通过创建一个函数来找到浏览器的高度，然后从其他 div 中减去它。这可能吗？如果可能，我该如何实现？

Answer 1

使用具有不同top值的position:absolute

.main-content {
    position:absolute;
    top:51px;
    bottom:0px;
}

和

@media screen and (max-width: 320px) {
    .main-content {
        top: 23px;
    }
}

fiddle

另一种方法是使用 display:table 和 display:table-row

body, html{
    width:100%;
    height: 100%;
}
body{
    display:table;
}
.main-content {
    width: 100%;
    height: 100%;
    display:table-row;
}

fiddle

Make a div fill the height of the remaining screen space