如何使这种flex-direction-column布局在Mobile Safari中工作？

问题描述 投票：1回答：1

我正在尝试实现网页的特定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中，则黄色区域不可见/不存在。我怀疑是因为为height: 0 div设置了contentBody定义。问题是，如果我删除height: 0定义，则内容会将整个页面延伸开，这也是我所不希望的。

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

我如何通过Flexbox达到这种效果，并使其在所有台式机和移动浏览器中都能正常工作？谢谢。

Edit＃1：请注意，即使在示例中，我在实际页面上为页眉，页脚等设置了固定高度，也没有设置高度。一切都是动态的，因此无法使用calc(100% - 300px)之类的东西。谢谢。

css flexbox mobile-safari flex-direction flex-direction-column
1个回答
0
投票

尝试计算内容高度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;
  justify-content: space-evenly;
  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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.