Question

在iOS Safari上，当我创建一个div时，它是一个flex项目，同时也使其成为一个flex容器，其高度无法拉伸以匹配其内容。但是，如果未将其制成伸缩容器，则其高度会拉伸以匹配其内容。

详细说明-我正在使用CSS Flexbox在页面底部放置页脚。页面正文有两个div-“ maincontents”和“ footer”。即使“ maincontents” div内容很少或没有，页脚仍将停留在窗口底部。并且，如果“ maincontents” div中包含很多内容，则可以根据需要将页脚向下推。通过将页面主体设置为flex容器，并将“ maincontents”设置为“ flex：1”，将“ footer”设置为“ flex：0”，可以轻松地在flexbox中实现此想法，这样，“ maincontents”将占用所有可用空间，而“页脚”被推到窗口的底部。它可以在所有现代浏览器（包括iOS Safari）上正常运行。

如果我也将“ maincontents”设置为flexbox本身（使用display：flex），则会出现问题。在iOS Safari上，页脚现在始终停留在窗口的底部，即使maincontents有很多内容可以将页脚进一步向下移动；相反，“主要内容”最终会继续在“页脚”下方，而不是将其压低。

我在jsfiddle上做了一个准系统模型。 https://jsfiddle.net/8xs1rocu/

如果在窗口桌面（chrome / ff / ie11）上打开小提琴，就会看到以下内容

这是如果在ipad或iphone（野生动物园）上打开它会看到的内容。

请注意，在iOS Safari浏览器中，页脚不会被内容压低，而是最终被内容压倒了。在台式机上的Chrome / FF / IE11上不会发生这种情况；在这些浏览器上，页脚被“ maincontents”的内容压低了。

如果删除“ display：flex”行，那么它也可以在ios苹果浏览器上完美运行，就像在其他浏览器上一样。但是，我需要“ display：flex”这一行，因为我会将其他内容放入需要使用css flexbox进行某种布局的“ maincontents”中。

直接在此处粘贴jsfiddle代码段：

html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.maincontents {
  flex: 1;
  display: flex; /* if you remove this line it works on Safari */
}

.footer {
  flex: 0;
  background-color: green;
}

<html>
  <head></head>
  <body>
    <div class="maincontents">
      Main contents1 <br />
      Main contents2 <br />
      Main contents3 <br />
      Main contents4 <br />
      Main contents5 <br /> 
      Main contents6 <br />
      Main contents7 <br />
      Main contents8 <br />
      Main contents9 <br />
      Main contents10 <br />
      Main contents11 <br />
      Main contents12 <br />
    </div>
   
    <div class="footer">
      Footer1 <br />
      Footer2 <br />
      Footer3 <br />
      Footer4 <br />
      Footer5 <br />
      Footer6 <br />
      Footer7 <br />
    </div> 
  </body>
</html>

Answer 1

进一步调查后，我找到了解决您问题的方法。希望借助这些信息，您可以进行以下更改：

html, body {
  height: 100%;
  width: 100%;
}

.maincontents {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.footer {
  flex: 0;
  background-color: green;
}

<html>
<head></head>
<body>
  <div class="maincontents">
    Main contents1 <br />
    Main contents2 <br />
    Main contents3 <br />
    Main contents4 <br />
    Main contents5 <br /> 
    Main contents6 <br />
    Main contents7 <br />
    Main contents8 <br />
    Main contents9 <br />
    Main contents10 <br />
    Main contents11 <br />
    Main contents12 <br />
  </div>

  <div class="footer">
    Footer1 <br />
    Footer2 <br />
    Footer3 <br />
    Footer4 <br />
    Footer5 <br />
    Footer6 <br />
    Footer7 <br />
  </div>
  
</body>
</html>

我已经在Safari和Chrome上进行了测试，并且可以按预期工作。以下是jsfiddle https://jsfiddle.net/1o3904xh/12/

我强烈建议任何查看此内容的人将页脚停留在页面底部，而任何保留在页面上方的内容都应按照以下方式进行操作。这是正确的语义，可以提高SEO和可访问性。通过这种布局，应该可以使您的网页处于很好的位置。

您可以详细了解HTML5元素here

html, body {
  width: 100%;
  height: 100%;
}

article {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

main {
  flex-grow: 1;
}

header, main, footer {
  flex-shrink: 0;
}

.footer {
  background-color: green;
}

<html>
  <body>
    <article>
      <header></header>
      <main>
        <div class="maincontents">
          Main contents1 <br />
          Main contents2 <br />
          Main contents3 <br />
          Main contents4 <br />
          Main contents5 <br />
          Main contents6 <br />
          Main contents7 <br />
          Main contents8 <br />
          Main contents9 <br />
          Main contents10 <br />
          Main contents11 <br />
          Main contents12 <br />
          Main contents13 <br />
          Main contents14 <br />
          Main contents15 <br />
          Main contents16 <br />
        </div>
      </main>
      <footer>
        <div class="footer">
          Footer1 <br />
          Footer2 <br />
          Footer3 <br />
        </div>
      </footer>
    </article>
  </body>
</html>

希望这对您有所帮助。

Answer 2

在iOS Safari中实现此功能的解决方案是在maincontents div中添加flex-shrink：0。

我改变了

.maincontents {
     flex: 1;
     display: flex;
}

到

.maincontents {
     /* flex: 1*/       /* removed this */
     flex-grow: 1;      /* added this */
     flex-shrink: 0;    /* added this */
     display: flex;
}

说实话，我不确定为什么会这样。 flex-shrink的默认值为flex-shrink：1。在Safari中，如果div既是flex项又是具有flex-shrink：1的flex容器，则div不会拉伸以适合其内容。这可能是Safari浏览器的错误，因为在台式机的Firefox / Chrome / IE中不会发生，但也会在台式机的Opera上出现（这很奇怪，因为Opera使用与Chrome相同的渲染引擎，但没有这个问题）。也许其他人可以提供一个解释，说明为什么在Safari和Opera中需要进行此调整，而在Chrome，Firefox或IE中则不需要。

如何使用flex-box使页脚停留在页面底部

2 个答案: