Question

使用flexbox布局，我有一个左列导航，其中菜单位于顶部，一个小版权页脚使用margin-top: auto;方法粘在底部。该页面位于React App中，其中组件调用API以在初始绘制后获取数据。加载内容区域后，将扩展到视口之外。我没有使用100vh所以我希望它会扩展到文档的其余部分，如Chrome＆amp; Firefox确实如此。相反，版权和导航在向下滚动以查看页面的其余部分时保持视口的高度。

目前它适用于Firefox＆amp; Chrome但不是Safari。自从我进行故障排除以来，父母可能没有做任何额外的事情。

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;
      }
    }
  }
}

Answer 1

将position: relative添加到.navigation-container，将position: absolute添加到.footer。看似只影响Safari。在这种情况下，如果没有额外的定位属性，其他浏览器可能会更少关注。

Safari flexbox＆amp; margin-top：auto with dynamic content

1 个答案: