flexboxメソッドを使用してSharePointマスターページにスティッキーフッターを追加しましたが、Windows上のすべてのブラウザーで問題なく動作していますが、SafariまたはChromeでは正しく機能しませんOSX。SafariまたはChrome OSXでFlexboxスティッキーフッターが動作しない
次のように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を見つけた、と私は遊んで始まっていることに基づいて、すべての種類のベンダープレフィックスで、私はフレックスボックスを使っていたやり方が多少非正統であることに気付きました。メインコンテンツ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（ビューポート外）以下にプッシュしていたはずです。私がページをスクロールすると、最初に描画された場所にちょうど収まるようになり、最初のレンダリング時にその下にあった内容をカバーしたままになります。
私はこれについて何ができますか？フレックスボックスをOSX上で正しく動作させるための秘訣は何ですか？どうやら答えhere.
を発見