rob*_*ers 3 css safari flexbox
我一直在尝试学习一些关于CSS flexboxes的东西,特别是为了让粘性页脚工作,基于这个例子.
布局是3个基本div:标题,主要内容和页脚.主内容div应该垂直扩展,以便页脚始终位于页面的底部.在Safari中,页面按预期加载,但是垂直调整窗口大小不会调整布局的高度(即没有任何移动) - 如果我使窗口更高,主内容div中的额外空间不会改变以保持同样,底部的页脚.水平调整窗口大小可以正确地重排页面.一切都在Chrome中按预期工作.
该示例页面的工作,因为我所期望的,我已经(使用紧随其后的例子CSS Autoprefixer的 现场演示).比较Web检查器中的页面,flexbox CSS看起来是一致的,唯一(看似)相关的区别是min-height: 100%flexbox容器的示例用途的实时代码,而我的(和给出的示例代码)使用min-height: 100vh(使用100%didn')为我工作).
所以我的问题是:示例网站做什么不同,我的不是,为什么？其次,为什么min-height一个百分比的工作,而另一个的视口单位呢？
我的代码(也在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>