Question

我正在尝试使用Material-ui中的Grid制作粘性页脚，但无法使其工作。我在一个列中嵌套了一行项目，但我一直在努力，但无济于事。

class InteractiveGrid extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <Grid container
        className={classes.root}
        direction= 'column'
        justify='flex-end'

      >
        <Grid item xs={12}>
          <Grid
            container
            className={classes.demo}
            direction= 'row'
            justify='flex-start'
            alignItems= 'flex-start'
          >
            {[0, 1, 2].map(value => (
              <Grid key={value} item>
                <Paper
                  className={classes.paper}
                  style={{ paddingTop: (value + 1) * 10, paddingBottom: (value + 1) * 10 }}
                >
                  {`Cell ${value + 1}`}
                </Paper>
              </Grid>
            ))}
          </Grid>
        </Grid>
      </Grid>
    )
  }
}

Answer 1

您的列没有固有高度，因此它只是行的高度。因此，flex-end无效。

为列提供固定或视口高度，如果容器具有固有高度，则为高度百分比。

基于代码的示例，使用固定高度（不能在CodeSandbox中使用vh）：https://codesandbox.io/s/llvq36r8q

Answer 2

我需要material-ui的页脚，所以我偶尔去了这里，但是如果有人像我一样来这里，那是官方实现： https://material-ui.com/components/app-bar/#bottom-app-bar

我还更新了上面的示例： https://codesandbox.io/s/keen-pond-jllbi?file=/demo.js

如何使用Material-ui v1.0.0-beta.30中的内置网格获得粘性页脚？

2 个答案: