Question

我已使用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上正常工作？

Answer 1

找到答案here.

显然（我应该说不出所料？）某些浏览器处理弹箱的方式存在一些缺陷。

我能够在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中运行

1 个答案: