Question

我已经准备了一个移动网站，它具有正确的图像宽高比，但是在一些屏幕较大的手机上，它会缩短，在页脚之后我会出现白色间隙。我宁愿在内容之间添加一些DIV，它们会在需要时自动拉伸。

我想到这样的事情：

true

<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> DIV将获得均匀的高度，以便页面适合屏幕高度。怎么做到这一点？或者，当页面缩短以填满整个移动屏幕时，您是否有其他解决方案？

编辑：我必须添加一件我认为不会导致问题的事情。这些解决方案都不适用于我，因为我使用jquery手风琴，当我执行.empty_gap时，即使我将所有面板都折叠，我也会获得比屏幕大小更大的值。我想这也是灵活盒子的原因，这些解决方案也不起作用。

EDIT2： 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; }即可使其正常工作。

<强> jsFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果您不需要支持旧版浏览器，那么flexible boxes就可以了。

查看here浏览器支持（与-webkit前缀版本联合使用时支持率为94.22％）。

您只需使用display: flex;将容器元素设置为flex-direction: column;，然后将flex-grow: 1（或任何＆gt; 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>

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

3 个答案: