html - 如何在屏幕底部对齐元素在 Material ui中

Question

我正在尝试将按钮对齐到屏幕的末尾，这样即使我滚动背景列表，按钮仍应保留在屏幕的底部。我试过但无法弄清楚。任何人都请帮助我这样做。

这是我的屏幕的样子。现在它总是在滚动时出现在屏幕中间。

这是我的代码

<Link to={"/checkout-summary"}>
          <div className="checkoutbtn">
            <Button
              style={{
                boxShadow: "none",
                borderRadius: "0px",
                position: 'absolute',
                bottom: 0
              }}
              variant="contained"
              color="primary"
            >
              Check Out
            </Button>
          </div>
        </Link>

Answer 1

将页脚固定在底部

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
  footer: {
    position: 'fixed',
    bottom: 0,
    width: '100%',
    height: 60,
    textAlign: 'center'
  }
}));

const classes = useStyles();

<Link to={"/checkout-summary"} className={classes.footer}>