css - 有没有更好的方法来确保页脚停留在可滚动 div 的底部，其高度足以接触屏幕底部？

Question

在帖子的末尾，我提供了问题的布局。

我有一个布局，有两列，一个不总是打开的导航侧边栏(col0)和一个始终打开的主区域(col1)。主要区域显示内容。最后，我有一个页脚位于页面最高层的正下方。

在主区域或内容区域内有一个过渡组件，它使用 CSS 过渡来呈现下一个路由组件。

我需要做的是让页脚成为页脚，即严格位于屏幕和包含的div的滚动位置的底部。这并不意味着固定，因为您可以滚动。

我想在 CSS 中执行此操作，但我无法让它运行，并且我有点想让它在安装组件之前读取高度并更新等。有更好的方法吗？

这是一个 react Component render() 函数，为了方便起见，删除了很多内容:

  <div style={prepareStyles(styles.heightHundred)}>
    <ChromeHelmet />
      <AppBar ... yada .../>
      <div style={prepareStyles(styles.root)}>
        <div style={prepareStyles(styles.content)}>
          <EasyTransition
            path={this.props.location.pathname}
            initialStyle={{opacity: 0, transform: 'translateY(-100%)'}}
            transition="opacity 0.2s ease-in, transform 0.3s ease-in-out 0.3s"
            finalStyle={{opacity: 1, transform: 'translateY(0%)'}}
            leaveStyle={{opacity: 0.9, transform: 'translateY(500%'}}
          >
          { this.props.children }
          </EasyTransition>
        </div>
      </div>
      <AppNavDrawer />
    <Footer
      style={prepareStyles(styles.footer)} />
  </div>

编辑

当我尝试使用 flex 时，我可以看出它很接近但是它没有任何效果，因为侧边栏显示为 position:fixed; 以及 React 组件中一些我不敢碰的奇特 CSS 东西。但是当我撤消该 position:fixed 时，页脚就在它需要的位置，但侧边栏显然很不稳定......

Answer 1

我建议使用 flex 盒布局。大多数浏览器都支持它(IE 10 及更高版本、Edge、Firefox、Chrome、Safari、Opera、iOS Safari、Opera Mini、Android 浏览器、Android 版 Chrome)。

只需将这些样式添加到父 div

display: flex; 
flex-flow: column no-wrap; 
justify-content: space-between;

在页脚添加

align-self: flex-end;

这是一个GREAT Flex 的解释及其工作原理。这里有很多非常有用的信息