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

Question

在我的 post 结尾处，我提供了问题的布局。

我的布局有两列，有点像，一个不总是打开的导航侧边栏 (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; 和一些花哨的东西CSS React 组件中我不敢触摸的东西。但是当我撤消那个 position: fixed 时，页脚就在它需要的地方，但侧边栏显然不稳定......

Answer 1

您要查找的是CSS Sticky Footer。

HTML:

<div id="wrap">
  <div id="main">
  </div>
</div>

<div id="footer">
</div>

CSS:

* {margin:0;padding:0;} 
html, body {height: 100%;}
#wrap {min-height: 100%;}

#main {
  overflow:auto;
  padding-bottom: 180px; /* must be same height as the footer */
}

#footer {
  position: relative;
  margin-top: -180px; /* negative value of footer height */
  height: 180px;
  clear:both;
} 

/*Opera Fix thanks to Maleika (Kohoutec)*/
body:before {
  content:"";
  height:100%;
  float:left;
  width:0;
  margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

Answer 2

我建议使用弹性框布局。大多数浏览器（IE 10 及更高版本、Edge、Firefox、Chrome、Safari、Opera、iOS Safari、Opera Mini、Android 浏览器、Chrome for Android).

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

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

在页脚添加

align-self: flex-end;

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

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

Is there a better way to ensure that a footer stays at the bottom of a scrollable div whose height is large enough to touch the bottom of the screen?

css

css-position

affix

reactjs

编辑