自动调节div之间的空间，高度为100%

Question

我准备了一个移动网站，它具有正确的图像纵横比，但是在某些屏幕较大的手机上，它很短，在页脚之后我得到白色间隙。我更愿意在内容之间添加一些 DIV，它们会在需要时自动拉伸。

我在想这样的事情：

<div id="wrapper">
<div id="header"></div>
<div id="content1"></div>
<div class="empty_gap"></div>
<div id="accordion"></div>
<div class="empty_gap"></div>
<div id="footer"></div>
</div>

.empty_gapDIV 的高度将均匀，因此页面适合屏幕高度。如何做到这一点？或者，对于页面缩短以填满整个手机屏幕的情况，您是否有任何其他解决方案？

编辑：我必须添加一件我之前没有想到的事情，它会导致问题。这些解决方案都不适合我，因为我使用 jquery 手风琴，当我执行$("#wrapper").outerHeight();时，即使我折叠了所有面板，我也会获得比屏幕尺寸大得多的价值。我想这也是灵活盒子的原因，这些解决方案也不起作用。

编辑2：JS解决方案现在可以工作了，我只需要从包装器中减去面板的内容。

Answer 1

如果你对 JavaScript 解决方案没问题，试试这个：

通常，您的div应该用div容器包裹。如果不是这种情况，请继续添加如下所示的：

<div id="wrapper">
<div id="header"></div>
<div id="content1"></div>
<div class="empty_gap"></div>
<div id="content2"></div>
<div class="empty_gap"></div>
<div id="footer"></div>
</div>

然后在 JavaScript 中，计算此容器div的高度并从窗口的高度中减去它。这将是您所有间隙的总和，因此除以您的间隙数量(在您的示例中为 2)以获得每个间隙的高度。像这样：

var totalGap = $(window).height() - $("#wrapper").outerHeight();
var gap = totalGap / 2; //2 is the number of your gaps
$(".empty_gap").css("height", gap);

将此代码放在页面完成加载的事件中。但是，如果你的应用支持轮换，则必须将此代码放在$(window).resize()事件中。

Answer 2

我建议使用flexbox布局，对于#content2上下相等的空间，您只需要设置#content2 { margin: auto 0; }即可使其工作。

js小提琴

html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
margin: 0;
}
#content2 {
margin: auto 0;
}

<div id="header">header</div>
<div id="content1">content1</div>
<div id="content2">content2</div>
<div id="footer">footer</div>

Answer 3

如果您不需要支持旧浏览器，则可以使用灵活的盒子。

在这里查看浏览器支持(与-webkit前缀版本一起使用时，94.22% 的支持)。

您只需要将容器元素设置为display: flex;withflex-direction: column;然后将flex-grow: 1(或 0>的任何内容)添加到.empty_gap元素中。

#container {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
#header, #footer {
height: 25px;
background-color: red;
}
#content1, #content2 {
height: 50px;
background-color: blue;
}
.empty_gap {
background-color: yellow;
flex-grow: 1;
}

<div id="container">
<div id="header"></div>
<div id="content1"></div>
<div class="empty_gap"></div>
<div id="content2"></div>
<div class="empty_gap"></div>
<div id="footer"></div>

</div>