为什么我的Flexbox粘滞页脚在Safari中不起作用？ [英] Why Does My Flexbox Sticky Footer Not Work in Safari?
问题描述
布局是3个基本的div：一个标题，主要内容和页脚。主要内容div应该垂直扩展，使得页脚始终位于页面的底部。在Safari中，页面按预期方式加载，但调整窗口的大小垂直不会调整布局的高度（即没有任何东西在移动） - 如果我使窗口更高，主内容div中的额外空间也不会改变，以将页脚保留在底部。调整窗口大小水平会正确地重新排列页面。在Chrome浏览器中，一切都按预期工作。 示例页面正如我所期望的那样工作，并且我紧跟着示例CSS（使用 Autoprefixer 现场演示）。比较网页检查器中的页面，flexbox CSS看起来是一致的，唯一的（看似）相关的区别在于示例上的实时代码使用 min-height：100％对于flexbox容器，我的（和给出的示例代码）使用 min-height：100vh （使用 100％所以我的问题是：什么是示例网站的做法不同，我的不是，为什么？其次，为什么 min-height 以百分比表示，而另一个表示单位是视口单位？
我的代码（也在jsfiddle 上）：
<！DOCTYPE html>
< html>
< head>
< title> Flexbox标题测试< / title>
< style type =text / css>
body {
font-family：Avenir，sans-serif;
display：-webkit-box;
display：-webkit-flex;
display：-ms-flexbox;
display：flex;
-webkit-box-orient：vertical;
-webkit-box-direction：正常;
-webkit-flex-direction：column;
-ms-flex-direction：column;
flex-direction：column;
padding：0;
保证金：0;
最小高度：100vh;
}
div {
width：100％;
}
div p {
margin-left：1em;
margin-right：1em;
}
div.header {
background-color：orange;
text-align：center;
}
div.main {
background-color：grey;
-webkit-box-flex：1;
-webkit-flex：1;
-ms-flex：1;
flex：1;
}
div.footer {
color：white;
background-color：blue;
}
< / style>
< / head>
< body>
< div class =header>
< h1>标头< / h1>
< / div>
< div class =main>
< p>很多文字< / p>
< / div>
< div class =footer>
< p>页脚文字在这里< / p>
< / div>
< / body>
< / html>
感谢来自开发者的网站我从的例子，我发现我的问题的原因： html 元素没有任何高度设置，因此 min-height 在 body 上没有任何效果。设置 html {height：100％; } 导致了预期的行为。
我承认还没有完全理解为什么初始布局和水平调整大小工作，但垂直调整大小不，但这至少解决了这个问题。有一些开发者的建议，Safari有一些与使用 vh 测量有关的bugginess，所以可能是这样。如果任何人都可以在这个问题上发现一些问题，那就千方百计去做。
I've been trying to learn something about CSS flexboxes, specifically to get a sticky footer working, based off this example.
The layout is 3 basic divs: a header, main content and footer. The main content div is supposed to expand vertically such that the footer is always at the bottom of the page. In Safari, the page loads as expected, but resizing the window vertically does not adjust the height of the layout (i.e. nothing's moving) — if I make the window taller, the extra space in the main content div doesn't change to keep the footer at the bottom, likewise . Resizing the window horizontally does reflow the page properly. Everything does work as expected in Chrome.
The example page works as I would expect, and I've followed the example CSS closely (using Autoprefixer's live demo). Comparing the pages in web inspector, the flexbox CSS appears to be consistent, and the only (seemingly) relevant difference is the live code on the example uses min-height: 100% for the flexbox container, whereas mine (and the example code given) uses min-height: 100vh (using 100% didn't work at all for me).
So my question: what is the example site doing differently that mine isn't, and why? Secondarily, why does min-height work in percentages for one, but only viewport units for another?
My code (also on jsfiddle):
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Header Test</title>
<style type="text/css">
body {
font-family: Avenir, sans-serif;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 0;
margin: 0;
min-height: 100vh;
}
div {
width: 100%;
}
div p {
margin-left: 1em;
margin-right: 1em;
}
div.header {
background-color: orange;
text-align: center;
}
div.main {
background-color: grey;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
div.footer {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
<div class="main">
<p>Lots of text here</p>
</div>
<div class="footer">
<p>Footer text here</p>
</div>
</body>
</html>
Thanks to some help from the developer of the site I took the example from, I discovered the cause of my problems: the html element didn't have any height set, thus the min-height on body didn't have any effect. Setting html { height: 100%; } resulted in the expected behaviour.
I admittedly still don't fully understand the why of what caused the initial layout and horizontal resizing to work, but vertical resizing not to, but this at least solves the problem. There was some suggestion from the developer that Safari has some bugginess related to using vh measurements, so that may be it. If anyone can shed some light on that issue, by all means go for it.
这篇关于为什么我的Flexbox粘滞页脚在Safari中不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
