How to Align Item at the bottom of the screen In material ui

user_8415167 0
Viewed 2118

I am trying to align button at the end of the screen so that even if i scroll background list still the button should remain at the bottom of the screen. I tried and unable to figure this out. Anyone please help me to do so.

This is how my screen looks like. Right Now it always come in the middle of the screen while scrolling . Scroll Image

Here is My code for this

<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>
material-ui reactjs css html
1 Answers

Fix the footer to the bottom

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