如何在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 => ({&nbsp; footer: {&nbsp; &nbsp; position: 'fixed',&nbsp; &nbsp; bottom: 0,&nbsp; &nbsp; width: '100%',&nbsp; &nbsp; height: 60,&nbsp; &nbsp; textAlign: 'center'&nbsp; }}));const classes = useStyles();<Link to={"/checkout-summary"} className={classes.footer}>

Answer 2

import { styled } from '@mui/system';&nbsp; &nbsp;&nbsp;const MyMessageBox = styled('div')({&nbsp; &nbsp; position: 'fixed',&nbsp; &nbsp; bottom: 0,&nbsp; &nbsp; width: '100%',&nbsp; &nbsp; height: 60,&nbsp; &nbsp; textAlign: 'center',});&nbsp; &nbsp; &nbsp;&nbsp;<MyMessageBox>Contents inside this will be shown at the bottom of the page</MyMessageBox>