为啥我的 Flexbox 粘滞页脚在 Safari 中不起作用?
Posted
技术标签:
【中文标题】为啥我的 Flexbox 粘滞页脚在 Safari 中不起作用?【英文标题】:Why Does My Flexbox Sticky Footer Not Work in Safari?为什么我的 Flexbox 粘滞页脚在 Safari 中不起作用? 【发布时间】:2014-07-01 18:45:47 【问题描述】:我一直在尝试学习一些关于 CSS flexbox 的知识,特别是让粘性页脚工作,基于 this example。
布局是 3 个基本 div:页眉、主要内容和页脚。主要内容 div 应该垂直扩展,以便页脚始终位于页面底部。在 Safari 中,页面按预期加载,但 vertically 调整窗口大小不会调整布局的高度(ie 什么都没有移动)——如果我让窗口更高,主要内容 div 中的额外空间不会改变以将页脚保持在底部,同样 . 水平地调整窗口大小确实会正确地重排页面。在 Chrome 中一切正常。
example page 按我的预期工作,并且我密切关注示例 CSS(使用 Autoprefixer's live demo)。比较 web 检查器中的页面,flexbox CSS 似乎是一致的,唯一(看似)相关的区别是示例中的实时代码使用 min-height: 100%
作为 flexbox 容器,而我的(以及给出的示例代码)使用 @ 987654327@(使用100%
对我来说根本不起作用)。
所以我的问题是:示例网站与我的不同之处在哪里,为什么?其次,为什么min-height
对一个单位起作用,而对另一个单位起作用?
我的代码(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>
【问题讨论】:
【参考方案1】:感谢site I took the example from 的developer 的帮助,我发现了问题的原因:html
元素没有设置任何高度,因此body
上的min-height
没有'没有任何影响。设置 html height: 100%;
会产生预期的行为。
诚然,我仍然不完全理解 为什么 导致初始布局和水平调整大小起作用的原因,但垂直调整大小不起作用,但这至少解决了问题。开发人员提出了一些建议,即 Safari 存在与使用 vh
测量相关的一些错误,所以可能就是这样。如果有人能对这个问题有所了解,一定要去做。
【讨论】:
你刚刚让我头疼得厉害。格拉齐。 感谢您跟进您的解决方案! 这是有道理的,但我确实没有自己考虑过。刚刚花了 1 小时仔细检查我的代码,却没有得到任何结果。以上是关于为啥我的 Flexbox 粘滞页脚在 Safari 中不起作用?的主要内容,如果未能解决你的问题,请参考以下文章
用于页眉、粘滞页脚和垂直对齐的中间内容的 CSS Flexbox 或 CSS 网格?