Macos Flexbox粘性页脚在Safari或Chrome OSX中不起作用_Macos_Google Chrome_Safari_Flexbox_Sticky Footer

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

macos google-chrome safari

Macos Flexbox粘性页脚在Safari或Chrome OSX中不起作用,macos,google-chrome,safari,flexbox,sticky-footer,Macos,Google Chrome,Safari,Flexbox,Sticky Footer,我已经使用flexbox方法向SharePoint母版页添加了一个粘性页脚，它在Windows上的所有浏览器中都可以正常工作，但在OSX上的Safari或Chrome中却不能正常工作 HTML大致如下所示： <body> <form>

我已经使用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>

现在，在搜索了一段时间后，我发现，基于这一点，我开始玩各种各样的供应商前缀，我甚至意识到我使用flexbox的方式可能有点非正统。我没有让主内容div

#s4 bodyContainer

增长以使用额外的空间，而是让页脚div向上扩展它的上边距以填充任何额外的空间，我想这会使

#s4工作区

弯曲，以在必要时填充视口

于是我试着加上

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

但这也没有起到任何作用（事实上，Windows上的IE也开始出现问题，以前它工作得很好）

我试图在OSX上的Safari和Chrome中修复的行为如下：

当页面呈现时，页脚似乎根据视口计算其上边距。它最初总是放在窗口的底部，好像没有什么内容，它应该向下推到窗口的底部。但即使有大量内容在其下方流动，也会发生这种情况，并且它确实应该向下推到

#s4 bodyContainer

（离开视口）下方。如果我滚动页面，它正好位于最初绘制的页面上，并且在最初渲染时仍然覆盖页面下的任何内容

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

找到了答案

显然（我应该毫不奇怪地说）某些浏览器处理FlexBox的方式存在一些bug

通过以下几点，我能够在IE、Firefox和Chrome（Windows上）以及Safari、Firefox和Chrome（OSX上）上可靠地实现我想要的行为：

#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的方式存在一些bug

通过以下几点，我能够在IE、Firefox和Chrome（Windows上）以及Safari、Firefox和Chrome（OSX上）上可靠地实现我想要的行为：

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

两年多后，我在Android的Chrome上发现了同样的错误。有趣的是，有六百多人看过你的帖子，但到目前为止还没有人能够投赞成票。为什么？两年多后，我在Android的Chrome上发现了同样的错误。有趣的是，有六百多人看过你的帖子，但到目前为止还没有人能够投赞成票。为什么？