flex 在 Firefox 53 中不起作用

【问题标题】：flex not working in firefox 53flex 在 Firefox 53 中不起作用
【发布时间】：2017-04-22 02:04:33
【问题描述】：

有点卡在这里。我正在使用 Firefox 53 测试我的网站。页面没有填满整个高度。我在 Chrome 和 Safari 上进行了验证，一切正常。

我通过 www.caniuse.com 确认 Firefox 53 支持 Flex。页面仍然无法正确呈现。

这里是网站http://actionmary.com/newSite/contact.html。尝试在 Chrome 上正确呈现，在 Firefox 53 上尝试。

这里是相关的 CSS

html{
    background-color: black;
}

body {
    /*min-width:800px;  suppose you want minimun width of 1000px */
    /*width: auto !important;   Firefox will set width as auto */
    width:100%; 

    margin:0;
    font-family: 'futura-pt', sans-serif;
    font-style: normal;
    font-weight: 400;

    display: flex;
    flex-flow: column;
    background-repeat:no-repeat;
    background-size:cover;
}

.content {
    width: 100%;
    flex: 1 1 auto;
    overflow: hidden;    
}

【问题讨论】：

标签： css firefox flexbox

【解决方案1】：

您正在使用百分比高度。例如：

.blackbox { min-height: 23%; }

您也没有在父元素上定义高度，某些浏览器需要这样做才能在子元素上呈现百分比高度。

您可以使用此方法在浏览器之间进行渲染变化。

要获得可靠的跨浏览器解决方案，请提供body 元素：

height: 100vh;

或者，如果您希望 body 随内容一起扩展：

min-height: 100vh;

更多细节在这里：

【讨论】：