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

Question

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

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 增长到使用额外的 space，而是让页脚 div 扩展它的上边距以填充任何额外的 space，我想这会在必要时弯曲 #s4-workspace 以填充视口。

然后我尝试添加

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

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

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

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

我该怎么办？让弹性盒在 OSX 上正常工作的秘诀是什么？

Answer 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;
}

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

Flexbox sticky footer not working in Safari or Chrome OSX

safari

macos

google-chrome

sticky-footer

flexbox