Safari flexbox＆margin-top：帶動態內容的自動

使用flexbox佈局時，我有一個左列導航，其中菜單位於頂部，一個小版權頁腳使用margin-top: auto;方法粘貼到底部。該頁面位於React應用程序中，組件正在調用API以在初始繪製後獲取數據。一旦加載，內容區域將擴展到視口之外。我沒有使用100vh，因此我預計它會擴展到Firefox的其他文檔，如Chrome &。相反，版權和導航在向下滾動以查看頁面的其餘部分時保持視口的高度。Safari flexbox＆margin-top：帶動態內容的自動

目前它適用於Firefox & Chrome，但不適用於Safari。可能有點額外的css對我的父母無所作爲，因爲我正在排除故障。

html, body { 
    height: 100%; 
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch; 
} 

.app { 
    max-width: 100vw; 
    height: 100%; 
    display: flex; 
    align-content: stretch; 

    .AppContainer { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: flex-start; 
    align-items: flex-start; 
    align-content: stretch; 
    height: 100%; 
    width: 100vw; 

    .navigation-container { 
     display: flex; 
     flex-direction: column; 
     flex-wrap: wrap; 
     height: 100%; 

     .navigation { 
     width: 220px; 
     margin-bottom: 40px; 
     } 

     .footer { 
     margin-top: auto; 
     color: #CCC; 
     font-size: 1.4rem; 
     line-height: 1.6rem; 
     padding: 0 20px 20px; 
     } 
    } 
    } 
}

來源

2017-08-25 Dave Bergschneider

你有沒有試過對齊自我：「flex-end」在頁腳 – philipheinser

我沒有，但只是做了。沒有好的或壞的影響。 –

在進一步的研究中'。導航容器'沒有達到100％的高度; –

新增position: relative到.navigation-container和position: absolute到.footer。看似隻影響Safari。在這種情況下，其他瀏覽器可能不需要額外的定位屬性。

來源

2017-08-29 23:38:03

Safari flexbox＆margin-top：帶動態內容的自動

回答

相關問題