flex在firefox中不工作53

位卡在這裏。我正在用Firefox 53測試我的網站。頁面沒有填滿整個高度。我在Chrome和Safari上進行了驗證，並且一切都很好。flex在firefox中不工作53

我通過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;  
}

來源

2017-04-21 codeNinja

你跟百分比高度工作。例如：

.blackbox { min-height: 23%; }

您還沒有在父元素上定義高度，爲了在子級上顯示百分比高度，某些瀏覽器需要這些高度。

您可以期望使用此方法瀏覽器之間的渲染變化。

對於一個可靠的，跨瀏覽器的解決方案，給body元素：

height: 100vh;

或者，如果你想body與內容拓展：

min-height: 100vh;

更多細節在這裏：

來源

2017-04-21 16:57:11

flex在firefox中不工作53

回答

相關問題