如何让这个 flex-direction-column 布局在 Mobile Safari 中工作？答案

【问题标题】：How do I get this flex-direction-column layout to work in Mobile Safari?如何让这个 flex-direction-column 布局在 Mobile Safari 中工作？
【发布时间】：2020-08-14 05:01:32
【问题描述】：

我正在尝试为网页实现特定的flex-direction: column 布局；我可以在所有桌面浏览器上使用它，但它在 Mobile Safari 中看起来不正确。

这是一个示例布局，其中包含必要的 HTML/CSS 来演示我正在寻找的内容：

<!DOCTYPE html>
<html>
    <head>
        <style>
            html,
            body {
                height: 100vh;
                margin: 0;
                padding: 0;
            }

            p {
                margin: 0;
                padding: 0;
            }

            .container {
                display: flex;
                flex-direction: column;
                height: 100vh;
            }

            .header {
                background: green;
                height: 150px;
            }

            .content {
                background: gray;
                flex: 1 0 auto;
                min-height: 1px; /* IE11 fix */
            }

            .contentContainer {
                background: blue;
                display: flex;
                flex-direction: column;
                height: 100%;
                margin: auto;
                width: 600px;
            }

            .contentHeader {
                background: red;
                height: 75px;
            }

            .contentBody {
                background: yellow;
                flex: 1 0 auto;
                height: 0;
                overflow-y: auto;
            }

            .footer {
                background: purple;
                height: 150px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
            </div>
            <div class="content">
                <div class="contentContainer">
                    <div class="contentHeader">
                    </div>
                    <div class="contentBody">
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                        <p>Lots of content here.</p>
                    </div>
                </div>
            </div>
            <div class="footer">
            </div>
        </div>
    </body>
</html>

如果您将其加载到任何浏览器（即 Chrome、Firefox、Edge、IE11 等）中，它会产生预期的效果，即在黄色部分有一个垂直滚动条，并带有“这里有很多内容”。 .

如果您将页面加载到 Mobile Safari 中，则黄色区域不可见/不存在。我怀疑这是因为为contentBody div 设置了height: 0 定义。问题是，如果我删除 height: 0 定义，那么内容会将整个页面拉长，这也是我不想要的。

我希望始终显示页眉/页脚和内容页眉，并让黄色内容主体区域填充页面上的任何剩余高度，并在内容主体内容长到需要一个时添加垂直滚动条.

如何使用 Flexbox 实现这种效果并使其在所有桌面和移动浏览器中都能正常工作？谢谢。

编辑#1：请注意，即使我在示例中为页眉、页脚等设置了固定高度，但在我的真实页面上，并没有设置高度。一切都是动态的，所以使用calc(100% - 300px) 之类的东西是行不通的。谢谢。

【问题讨论】：

标签： html css flexbox mobile-safari

【解决方案1】：

尝试计算内容高度，100vh - 300px（150px 页眉和 150px 页脚）并计算 contentBody 100% - 75px（75px contentHeader）。

你可以像这样编辑你的CSS：

.content {
  background: gray;
  flex: 1 0 auto;
  min-height: 1px; /* IE11 fix */
  height: calc(100vh - 300px);
}

.contentBody {
  background: yellow;
  flex: 1 0 auto;
  height: calc(100% - 75px);
  overflow-y: auto;
}

链接到jsFiddle

编辑：

试试这个代码以获得完整的动态高度值：

html,
body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
}

.header {
  background: green;
  height: auto;
}

.content {
  background: gray;
  min-height: 1px; /* IE11 fix */
  height: auto;
  overflow-y: auto;
}

.contentContainer {
  background: blue;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: auto;
  width: 600px;
}

.contentHeader {
  background: red;
  height: auto;
}

.contentBody {
  background: yellow;
  height: auto;
  overflow-y: auto;
}

.footer {
  background: purple;
  height: auto;
}

<div class="container">
  <div class="header">
  header
  </div>
  <div class="content">
    <div class="contentContainer">
      <div class="contentHeader">
      contentHeader
      </div>
      <div class="contentBody">
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
        <p>Lots of content here.</p>
      </div>
    </div>
  </div>
  <div class="footer">
  footer
  </div>
</div>

【讨论】：

谢谢，J4R。我之前应该提到过这一点，我会相应地编辑我的问题，但我没有为页眉、页脚等设置高度。我这样做只是为了演示目的。一切实际上都是动态的。不过感谢您的回答。
你也可以calc(100vh - 10%) 或其他。取决于你的动态值是什么。
当我说“动态”时，我的意思是这些元素的高度不是由 CSS 中的任何高度声明（px 或 %）决定的。它们 100%（不是双关语）由这些 div 中的内容决定，并且内容有时会动态变化。
我编辑我的答案。如果你设置了高度值auto 和一些更多的调整，它应该像这样工作
J4R，感谢您的所有 cmets 和反馈。我尝试了您的解决方案，虽然它适用于桌面浏览器，但它不适用于 Mobile Safari。