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

我已经使用flexbox方法向SharePoint母版页添加了粘性页脚，并且在Windows上的所有浏览器上都能正常工作，但在Safari或Chrome上无法正常工作OSX。Flexbox粘性页脚在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增长到使用额外的空间，我得到的页脚div扩大它的顶部边距，以填补任何额外的空间，我想如果有必要的话，我会弹出#s4-workspace填充视口。

于是我尝试添加

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

但是，这并没有帮助（实际上开始导致在Windows上，它已经能正常工作之前，IE问题）。

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

当页面呈现，却仿佛页脚计算它的基础上，视口上边距。它总是最初坐在窗户的底部，就好像是内容很少的情况一样，它应该推到窗户的底部。但是即使内容很多，它也会发生这种情况，而且它确实应该推到#s4-bodyContainer以下（在视口之外）。如果我滚动页面，它就会刚好位于页面的原始绘制位置，并且仍然覆盖最初渲染下的任何内容。

我该怎么办？为了使Flexbox在OSX上正常工作有什么秘诀？

来源

2016-04-27 Dylan Cristy

找到了答案here.

显然，（我应该说是意料之中？）也有在某些方式浏览器处理flexboxes一些错误。

我能得到我想要的可靠跨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; 
}

来源

2016-05-02 16:31:32

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

回答

相关问题