IPad，Safari，CSS：使用flex填充頁面

我嘗試使用flex將佈局擴展到整個顯示高度。當內容很小時，頁腳始終位於底部。當主內容高於顯示大小時，它應該像普通頁面一樣運行並滾動到頁腳。IPad，Safari，CSS：使用flex填充頁面

以下代碼在我的工作站上使用Firefox和Chrome時的預期工作方式，但在Safari上的IPad上，頁腳位於頁面的任何位置。將html高度設置爲100％時出現問題。沒有設置任何高度的HTML部分它的工作原理，但是當主要內容小於顯示高度身體沒有拉伸。

重要提示：這不能使用JSFiddle進行復制，因爲它們使用IFrame，但內部使用了整個HTML。

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
    html { 
     height: 100%; 
     margin: 0; 
    } 
    body { 
     margin: 0; 
     display: flex; 
     flex-direction: column; 
     height: 100%; 
    } 
    main { 
     flex-grow: 1; 
    } 
    div { 
     background-color: yellow; 
     height: 1200px; 
    } 
    </style> 
</head> 
<body> 
    <main> 
     <div>main</div> 
    </main> 
    <footer> 
     footer 
    </footer> 
</body> 
</html>

UPDATE：這個問題也可以在Mac OS X轉載使用Safari 9.0.2

來源

2016-01-23 gregor

我終於解決了這個問題。重要的是將height: auto;和min-height: 100%;添加到body和html和position: absolute;到body。

下面是在我的所有測試環境中工作的最終代碼。

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html { 
    height: auto; 
    min-height: 100%; 
    margin: 0; 
} 

body { 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
    height: auto; 
    min-height: 100%; 
    position: absolute; 
    width: 100%; 
} 

main { 
    flex-grow: 1; 
} 

div { 
    background-color: yellow; 
    height: 200px; 
} 
</style> 
</head> 
<body> 
    <main> 
     <div>main</div> 
    </main> 
    <footer> footer </footer> 
</body> 
</html>

來源

2016-01-23 19:33:05 gregor

IPad，Safari，CSS：使用flex填充頁面

回答

相關問題