CODEWITHSUNDEEP
htmlcssreactjsmaterial-ui
burneverything1
burneverything1

Reputation: 75

Material UI Footer not going to the bottom of page

Screenshot of Page

When there is no content, my Footer using AppBar does not properly go to the end of the page, only to the end of the content. I want it to stick to the bottom of the page if the content doesn't reach to the bottom of the page, but if the content extends past the screen then I want it to be at the bottom of that content.

Currently it is correctly at the bottom of the content when content extends past the screen, but it is not at the bottom of the page when the content doesn't reach the bottom of screen.

const Footer = () => {
    return (
        <AppBar position='sticky' sx={{ top: 'auto', bottom: 0 }}>
            <Grid container direction='column'>
                <Grid item container>
                    <Grid item xs={0} sm={1} />
                    <Grid item xs={12} sm={10}>
                        <h1> info section</h1>
                    </Grid>
                    <Grid item xs={0} sm={1} />
                </Grid>
                <Grid item container>
                    <Grid item xs={0} sm={1} />
                    <Grid item xs={12} sm={10}>
                        <Toolbar disableGutters={true}>
                            <h1>bottom toolbar</h1>
                        </Toolbar>
                    </Grid>
                    <Grid item xs={0} sm={1} />
                </Grid>
            </Grid>
        </AppBar>
    )
}

Upvotes: 1

Views: 2694

Answers (1)

Feroz
Feroz

Reputation: 556

So, the possible best solution of this should be set minimum height of the content area of the page exclude height of the header and footer. Please check the code below. Your approach is not the solution what you are looking for. Hope this will help you understand my approach.

/* Ganeral Style */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
div{
    background-color: blueviolet;
    padding: 30px;
    height: 100px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid darkturquoise;
}
/* Style for solution */
.content{
    min-height: calc(100vh - 200px);/* header + footer = 200px */
    /*height: 800px;*/ /* To test if the content extend over the page */
}
.footer{}
.header{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="header">Header</div>
    <div class="content">Content</div>
    <div class="footer">footer</div>
    
</body>
</html>

Upvotes: 1

Related Questions