Flexbox 粘性页脚在 Safari 或 Chrome OSX 中不起作用答案

【问题标题】：Flexbox sticky footer not working in Safari or Chrome OSXFlexbox 粘性页脚在 Safari 或 Chrome OSX 中不起作用
【发布时间】：2016-08-22 08:10:24
【问题描述】：

我使用 flexbox 方法向 SharePoint 母版页添加了一个粘性页脚，它在 Windows 上的所有浏览器中都可以正常工作，但在 OSX 上的 Safari 或 Chrome 中无法正常工作。

HTML大致如下：

<body>
    <form>
        <!-- 
            a whole bunch of SharePoint stuff here that I can't mess with 
         -->
         <div id="s4-workspace">
             <div id="s4-bodyContainer"></div>
             <div id="footer"></div>
         </div>
    </form>
</body>

我最初的 CSS 是这样的：

#s4-workspace {
    display: flex;
    flex-direction: column;
}
#footer {
    clear: both;
    height: 100px;
    min-height: 100px;
    width:100%;
    background-color: #2e2e2e;
    font-size: 11px;
    margin-top: auto;
}

现在经过一番搜索，我找到了this question，基于此，我开始使用各种供应商前缀，我什至意识到我使用 flexbox 的方式可能有点不正统。我没有让主要内容 div #s4-bodyContainer 增长以使用额外的空间，而是让页脚 div 扩大它的上边距以填充任何额外的空间，我想这会弯曲 #s4-workspace 以在必要时填充视口。

然后我尝试添加

#s4-bodyContainer {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

但这也无济于事（实际上开始在 Windows 上的 IE 中引起问题，以前运行良好）。

我试图在 OSX 上的 Safari 和 Chrome 中修复的行为是这样的：

当页面呈现时，似乎页脚会根据视口计算其上边距。它最初总是位于窗口的底部，好像内容很少，它应该向下推到窗口的底部。但是即使它下面有很多内容也会发生这种情况，并且它确实应该被推到#s4-bodyContainer以下（超出视口）。如果我滚动页面，它只是位于页面上最初绘制的位置，并且在初始渲染时仍然覆盖其下方的任何内容。

对此我能做些什么？让 flexbox 在 OSX 上正常工作的秘诀是什么？

【问题讨论】：

两年多后，我在 Android 的 Chrome 中遇到了同样的错误。有趣的是，超过 600 人看过您的帖子，但到目前为止还没有人给它点赞。为什么？！

标签： macos google-chrome safari flexbox sticky-footer

【解决方案1】：

找到答案here.

显然（我应该说不出所料吗？）某些浏览器处理 flexbox 的方式存在一些错误。

我能够通过以下方式在 Windows 上的 IE、Firefox 和 Chrome 以及 OSX 上的 Safari、Firefox 和 Chrome 中可靠地获得我想要的行为：

#s4-workspace {
    display: flex;
    flex-direction: column;
}


#s4-bodyContainer {
    flex: 1 0 auto;
}

#footer {
    clear: both;
    height: 100px;
    min-height: 100px;
    width:100%;
    background-color: #2e2e2e;
    font-size: 11px;
    margin-top: auto;
    flex-shrink: 0;
}

【讨论】：