我一直在尝试学习一些关于 CSS flexboxes 的知识,特别是为了让粘性页脚工作,基于这个例子 http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/.
布局由 3 个基本 div 组成:页眉、主要内容和页脚。主要内容 div 应该垂直扩展,以便页脚始终位于页面底部。在 Safari 中,页面按预期加载,但调整了窗口大小垂直不调整布局的高度(i.e.没有任何东西在移动)——如果我使窗口变高,主要内容 div 中的额外空间不会改变以将页脚保持在底部,同样。调整窗口大小水平地是否正确重排页面。 Chrome 中一切都按预期工作。
The 示例页面 http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/正如我所期望的那样工作,并且我严格遵循示例CSS(使用自动前缀器 https://github.com/ai/autoprefixer 现场演示 http://jsfiddle.net/simevidas/udyTs/show/light/)。比较 Web 检查器中的页面,Flexbox CSS 似乎是一致的,唯一(看似)相关的区别是示例中使用的实时代码min-height: 100%
对于 Flexbox 容器,而我的(以及给出的示例代码)使用min-height: 100vh
(using 100%
对我来说根本不起作用)。
所以我的问题是:示例网站的做法与我的网站不同,为什么?其次,为什么min-height
一个以百分比工作,但另一个仅以视口单位工作?
我的代码(也在 jsfiddle 上 http://jsfiddle.net/gZ6be/1/):
<!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>
感谢以下人士的一些帮助开发商 https://twitter.com/philwalton of the 我举的例子来自网站 http://philipwalton.github.io/solved-by-flexbox/,我发现了问题的原因:html
元素没有设置任何高度,因此min-height
on body
没有任何效果。环境html { height: 100%; }
导致了预期的行为。
我承认我仍然不完全理解why是什么导致初始布局和水平调整大小起作用,但垂直调整大小不起作用,但这至少解决了问题。开发人员建议 Safari 存在一些与使用相关的错误vh
测量,所以可能就是这样。如果有人可以阐明这个问题,请务必去做。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)