在IE 11中，Flexbox布局 - 标题，自动内容，粘性页脚 - 非样式一致

Question

我尝试使用粘性页脚布局来跨浏览器工作。菲利普沃尔顿似乎完美地完成了所展示here—https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/。

据我所知，我正确使用了flexbox和前缀。但我知道我犯了错误！任何帮助非常感谢！我没有发布代码，因为我认为这是在浏览器中调试时最简单的。

Answer 1

您可能需要首先清理代码，因为当前的IE11，FF和CH以及使用-webkit前缀甚至是纯CSS3。 Dunno供应商订购SCSS。

但一般来说，使用flexbox制作一个粘性页眉/页脚非常简单：

• 容器：3行的列，=＆gt; 显示：flex; justify-content：space-between
• 第一行:(标题）固定高度=＆gt;没有特定的弹性箱代码
• 第二行:(内容）弯曲高度=＆gt; flex：1
• 第三行:(页脚）固定高度=＆gt;没有特定的弹性箱代码

修改元素的最小/最大高度/宽度以满足您的需求

＆＃39;的空间之间＆＃39;在三行（或列）上，弯曲中间的一行会产生所需的结果，不会更容易。