时间戳

首页 > 解决方案 > 如何在材质ui中对齐屏幕底部的项目

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

问题描述

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

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

这是我的代码

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

标签： htmlcssreactjsmaterial-ui

解决方案

将页脚固定到底部

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

推荐阅读