css - 粘性 flexbox 页脚未固定到底部-6ren

css - 粘性 flexbox 页脚未固定到底部

转载作者：行者123 更新时间：2023-11-28 14:01:04

我想在加载时让整个 UI 适合屏幕，但我的页脚没有固定在移动设备上的 View 底部。

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

我已确保使用正确的元视口(viewport)标签。在我使用 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>

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

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

有什么我遗漏的吗？

最佳答案

请注意，在某些移动浏览器上，如果元素的高度为 100vh，您将需要向下滚动才能完整查看。 This is intentional ，它与滚动时可见区域的变化有关(例如，在许多移动浏览器(如 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 .

关于css - 粘性 flexbox 页脚未固定到底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57748286/