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

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

.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

Answer 2

您可以在.main-content div上使用calc来计算大小，但您需要设置页眉，页脚和子标题div的高度。虽然你可以给身体一个蓝色的背景颜色，并达到同样的目的，但似乎对我来说？

Answer 3

更改

fontawesome.css

到

@media screen and (max-width: 320px) {
    .sub-header {
        display: none;
    }
}

我认为这就是你的意思。 Fiddle

Answer 4

这里不需要JavaScript解决方案。

导致白色区域是因为您使用position: absolute强制页脚到窗口底部，无论内容如何。

这不是实现此目的的常规方法，稍后当您向main-content div添加内容时，您将遇到问题。您会发现页脚将位于此内容上（如果您垂直缩小窗口，也会发生这种情况）。

我认为你想要做的是给main-content div min-height:，这样，如果内容很少，页面就不会崩溃，看起来很糟糕，但它会当添加更多内容时自然伸展。

您也可以从position: absolute div。

中删除footer

这是一个演示： http://jsfiddle.net/t46aopas/

**更新**

如果你想要一个动态解决方案，我在这里创建了一个带有大量注释的JavaScript示例：http://jsfiddle.net/nahgdkaw/

（因为你说你不熟悉JavaScript，我收录了很多评论;））

希望能帮助你一路走来。

请注意，如果.main-content div中的内容大于.main-content div区域，则div不会展开以适应它。

然后，您可以使用提供的代码并在if div中添加.main-content语句，然后检查.main-content内容大于可用区域（您可能需要在.main-content内容周围添加包装器div）。如果是，则调整.main-content div的大小以匹配.main-content内容高度（否则，执行当前调整大小）。

（另外，我强烈建议不要将HTML表用于表格数据以外的任何其他内容）

Answer 5

我编辑了我的原始答案，但没有添加评论通知您所需的声誉点。在您看到我上面的更新答案后，我会删除此答案。

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

5 个答案: