如何在材质ui中对齐屏幕底部的项目答案

【问题标题】：How to Align Item at the bottom of the screen In material ui如何在材质ui中对齐屏幕底部的项目
【发布时间】：2020-07-08 23:46:30
【问题描述】：

我正在尝试对齐屏幕末尾的按钮，以便即使我滚动背景列表，该按钮仍应保留在屏幕底部。我试过但无法解决这个问题。任何人都请帮我这样做。

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

这是我的代码

<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>

【问题讨论】：

将按钮移动到内容之后，看起来您在按钮之前指定了高度。你可以试试display: inline-block。

标签： html css reactjs material-ui

【解决方案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}>

【讨论】：