css - flex 在 firefox 53 中不工作

Question

有点卡在这里。我正在使用 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;    
}

Answer 1

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

.blackbox { min-height: 23%; }

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

您可以预期使用此方法的浏览器之间的渲染差异。

对于可靠的跨浏览器解决方案，提供 body 元素:

height: 100vh;

或者，如果您希望 body 扩展内容:

min-height: 100vh;

更多细节在这里:

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent