css - CSS：使用 Flexbox 的粘滞页脚——通过设置百分比来避免 vh 单位？

Question

我正在尝试使用 Flexbox 来实现粘性页脚（页脚位于页面底部，即使内容很少）。

我在网上找到了一个很好的例子：

HTML：

<body class="Site">
    <header>...</header>
    <main class="Site-content">...</main>
    <footer>...</footer>
</body>

CSS：

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

.Site-content {
    flex: 1;
}

注意：由于无前缀声明，不适用于所有浏览器，也许在 Chrome 中尝试

虽然这可行，但我不喜欢使用该vh单元，因为该单元的支持甚至不如 Flexbox。所以我尝试使用百分比而不是vh：

body {
    display: flex;
    min-height: 100%;
    flex-direction: column;
}

（为了简短起见，我只发布了更改的代码，但 Fiddle 中有一个完整的示例。）

现在解决方案不再起作用，因为body' 的父html元素 - 元素 - 没有声明高度，因此min-height没有参考。所以我试图设置

html,
body {
    min-height: 100%;
}

但这也无济于事。可能是因为那样，html元素也没有参考。作为结论，我必须这样做才能让它再次工作：

html {
    height: 100%;
}

body {
    display: flex;
    min-height: 100%;
    flex-direction: column;
}

height: 100%虽然这似乎可行，但我不确定在html元素上使用的副作用。我记得几年前，我曾经在没有匹配溢出声明的情况下使用类似的东西使一个网站无法使用。

这个解决方案有什么缺点吗？是否有使用百分比的更强大的解决方案？

0 回答 0