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：带动态内容的自动

回答

相关问题