粘性 flexbox 页脚未固定到底部

Question

我想在加载时将整个 UI 显示在屏幕上，但我的页脚没有固定在移动设备上的视图底部。

在桌面网络浏览器上，它运行完美。当我在移动网络浏览器上查看此内容时，页脚位于页面下方，使页面可滚动。它不应该滚动，相反，它应该完全适合视口。

我已确定使用了正确的元视口标签。在我使用 flexbox 的地方包含前缀。我尝试使用相对定位，但仍然没有得到我想要的结果。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: 'Roboto', sans-serif;
}

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  height: 100%;
  min-height: 100vh;
  flex-direction: column;
  max-width: 420px;
  margin: 0 auto;
  padding: 1rem 1rem 0 1rem;
}

header {
  margin: 2rem 0;
}

main {
  -webkit-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

footer .btn-group {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
}

<head>
  <meta charset="UTF-8">
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <header>
      <h1 class="title">Title</h1>
    </header>
    <main>
      <div class="list">
        <input type="text">
        <input type="text">
      </div>
    </main>
    <footer>
      <div class="btn-group">
        <button class="btn-refresh">
                    Refresh
                </button>
        <button class="btn-add">
                    Add New
                </button>
      </div>
      <button class="btn">Main Action</button>
    </footer>
  </div>
</body>

在移动设备上，我希望页脚固定在浏览器视口的底部，但是按钮组有点过时，用户需要滚动才能看到完整的按钮组。

查看我的 codepen 版本时，它工作正常。但是，当我将代码复制并粘贴到我的服务器时，页脚不会留在底部。

有什么我遗漏的吗？

Answer 1

试试这个

.container { max-height: 100vh; box-sizing: border-box; }

Answer 2

请注意，在某些移动浏览器上，如果项目的高度为 100vh，您将需要向下滚动才能完整查看。，它与滚动时可见区域的变化有关（例如，在许多移动浏览器中，如 Chrome，向下滚动时顶部的工具栏消失）：

This is completely intentional. It took quite a bit of work on our part to achieve this effect. :)

The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS).

It is hard to show you the “looks like shit” part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting.

Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size.

From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.

如果您正在寻找规避这种行为的方法，我建议您阅读以下内容：The trick to viewport units on mobile。

粘性 flexbox 页脚未固定到底部

Sticky flexbox footer not fixed to bottom

css

sass

flexbox

footer

sticky-footer