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;

此处有更多详情：

flex没有在firefox 53中工作

1 个答案: