What is the best way to keep the footer at the bottom and make it fixed in Material UI?

import * as React from "react";
import Container from "@mui/material/Container";
import Image from "next/image";
import Link from "@/src/Link";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";

export default function GuestFooter() {
  return (
    <Paper sx={{marginTop: 'calc(10% + 60px)', bottom: 0}} component="footer" square variant="outlined">
      <Container maxWidth="lg">
        <Box
          sx={{
            flexGrow: 1,
            justifyContent: "center",
            display: "flex",
            my:1
          }}
        >
          <Link href="/">
            <Image priority src="/Logo.svg" width={75} height={30} alt="Logo" />
          </Link>
        </Box>

        <Box
          sx={{
            flexGrow: 1,
            justifyContent: "center",
            display: "flex",
            mb: 2,
          }}
        >
          <Typography variant="caption" color="initial">
            Copyright ©2022. [] Limited
          </Typography>
        </Box>
      </Container>
    </Paper>
  );
}

https://i.sstatic.net/X10b4.png

cssreactjsmaterial-ui

Answer №1

Implemented position sticky with a width set to 100% to ensure it remains fixed at the bottom, using bottom: 0.

 export default function GuestFooter() {
  return (
    <Paper sx={{marginTop: 'calc(10% + 60px)',
    width: '100%',
    position: 'fixed',
    bottom: 0,
    width: '100%'
    }} component="footer" square variant="outlined">
      <Container maxWidth="lg">
        <Box
          sx={{
            flexGrow: 1,
            justifyContent: "center",
            display: "flex",
            my:1
          }}
        >
            <div>
            <Image priority src="/Logo.svg" width={75} height={30} alt="Logo" />
            </div>
        </Box>

        <Box
          sx={{
            flexGrow: 1,
            justifyContent: "center",
            display: "flex",
            mb: 2,
          }}
        >
          <Typography variant="caption" color="initial">
            Copyright ©2022. [] Limited
          </Typography>
        </Box>
      </Container>
    </Paper>
  );
}

Modifications made on the MUI 'Paper' component, enclosing the entire JSX structure:

position: 'sticky',
bottom: 0
width: '100%',

Latest Outcome:

 <Paper sx={{marginTop: 'calc(10% + 60px)',
position: 'fixed',
bottom: 0,
width: '100%'
}} component="footer" square variant="outlined">

Answer №2

I encountered a similar issue, and I discovered a very elegant solution for it.

To solve this problem, you can create a Box Component that serves as the direct parent of your Footer Component, using the styles below:

<Box
    sx={{
      display: 'flex',
      flexDirection: 'column',
      minHeight: '100vh',
    }}
  > 
  <YourFooterComponet/>
</Box>

Within your footer component, apply a margin top with the value of 'auto' like so:

<Box
  sx={{
    borderTop: "1px solid #000",
    marginTop: "auto",
    p: 4,
  }}
  component="footer"
>
 {your-content}
</Box>

By following this approach, the footer will always remain at the bottom of the content body page. I discovered this solution through the following resources:

Answer №3

Enclose all child components (excluding Footer) within a Box element in this manner:

<Box display={"flex"} minHeight={'calc(100vh - FOOTERHEIGHTpx)'}>
{children}
</Box>

Alternatively, you can include the following attributes in your individual page components:

display={"flex"} minHeight={'calc(100vh - FOOTERHEIGHTpx)'}

Remember to substitute FOOTERHEIGHT with the precise height of your Footer component.

This approach is highly effective. By utilizing this technique, you can apply standard styling to your footer component without the need for extra properties such as position and bottom.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing Frontend Routing with Golang: A Step-by-Step Guide

My current setup involves serving my react app with the following configuration func main() { http.Handle("/", http.FileServer(http.Dir("./build/"))) http.HandleFunc("/my_api", handler) http.ListenAndServe(":8 ...

reactjsgoreact-router

Personalize the color scheme for your timeline paper

I am interested in customizing this specific example of a personalized timeline: import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Timeline from '@material-ui/lab/Timeline'; import Timeli ...

javascriptcssreactjsmaterial-ui

Modify the width measurement from pixels to percentage using JavaScript

Looking for some help with a content slider on my website at this link: . I want to make it responsive so that it adjusts to 100% width. I managed to make it responsive by tweaking some code in the developer tools, but now I'm stuck. The bottom two p ...

javascriptjqueryhtmlcssresponsive-design

Tips for creating a custom Menu with content overflow in a single direction

What is the goal of this task? I have developed a custom Menu in my application with 8 options. There is a need to dynamically disable certain menu options based on specific conditions (e.g. disabling the last 4 options). When a user hovers over a disable ...

javascripthtmlcssoverflow

What is the proper way to align text based on the text above using CSS?

I have a container with a width of 50% of the viewport width, which contains some text. I want to align some other text below it to the right side. You can find an example here: https://jsfiddle.net/hadr4ytt/1/ Here is the current CSS for this: .containe ...

jqueryhtmlcss

locate the presence of a specific letter within a sequence of characters

When dealing with strings like "Galley1", "Galley2", "Galley3", "Galley4", "Galley5", "Galley6" up to "Galley20", the task is to determine whether a condition is met. The condition should return true if the string contains a number between 1 and 7, inclusi ...

javascriptreactjs

React Material-UI eliminates the 'content' property from the CSS pseudo-element

Creating a React MUI Box and styling it like this: <Box id='my-box' sx={{ '&::before': { content: 'Yay! ', backgroundColor: 'red' } }} >Life is beautiful</Box> However, duri ...

cssreactjsmaterial-uijsx

There seems to be a glitch in the filtering system of the mui datagrid

<DataGridPremium initialState={{ columns: { columnVisibilityModel: { actions: false, }, }, }} rows={productList} columns={columns} pageSize={10} autoHeight disableRowSelectionOnClick ...

material-uidatagridmui-datatablemui-x-data-grid

Could you please provide instructions on how to manipulate the :root CSS variable using JQuery?

Is there a way to update the :root css variable using jquery? :root { --color: #E72D2D; } .box-icon { background-color: var(--color); } I tried but it doesn't seem to work $("#blueColor").click(function(e) { $(":root").css("-- ...

jquerycss

Empty placeholder feature in Material UI Autocomplete

Currently, I am working on a project that involves using Material UI Autocomplete. At the beginning, the option list is empty. However, upon input change, the list gets populated with data. During this initial empty state, I would like to display a placeh ...

reactjsmaterial-uiautocomplete

Image missing aria-label attribute

I am facing an issue with getting the aria-label to display on my image. Despite checking my code, I cannot figure out why it is not working. Any ideas on what might be missing? Here is the code from my NextJS app: The svg in my public folder. <?xml v ...

htmlcssreactjsnext.js

Troubleshooting the "Unhandled Rejection (Error): not supported" error in React with Cloud Firestore Integration

Querying a Cloud Firestore database has been giving me trouble lately, as I am using the following code: db.collection("shops").where("email", "==", user.email).get() .then(...) .catch(...) In the "catch" block, I have included code to handle promise rej ...

reactjsfirebasegoogle-cloud-firestore

I'm throwing in the towel on CSS, I just can't seem to get a simple button to sit at the bottom of

Struggling to position a button at the bottom of a div? I've tried everything I could find online but nothing seems to work! Here's my code: <ion-col > <div id="secondCol"> <ion-text> {{card.cardPo ...

htmlcssbuttondivision

Updating radio button color upon selection in Boostrap

Looking to customize the colors of radio buttons found on this Bootstrap page By default, the background color is white and changes to blue when clicked. <div class="btn-group" role="group" aria-label="Basic radio toggle button ...

htmlcsstwitter-bootstrapbootstrap-5

I recently launched a website built with React on Netlify, however, instead of the desired content, all I see

While attempting to deploy my ReactJS project - a Tetris game, specifically - I encountered the following error: https://i.stack.imgur.com/0pAvk.png I came across a different Stack Overflow post mentioning that this may be caused by a reference to manifes ...

reactjsdeploymentnetlify

Can you help me figure out how to make a header that sticks to the top of the page as you scroll horizontally, and a sidebar that stays in place as you scroll vertically with

I am currently working on developing a layout that includes a sticky header and sidebar for my content list. My goal is to have the sidebar scroll down as I move through the page content, while also ensuring that the header scrolls horizontally along with ...

htmlcss

How can I make the columns in Next.js / Tailwind expand horizontally first instead of vertically?

Recently, I decided to customize the Next.js Image Gallery starter for some hands-on experience in full stack development with Next.js. My goal was to create a chronological photo gallery of a recent trip, but encountered an issue where the responsive colu ...

javascriptreactjsnext.jstailwind-cssvercel

I'm a bit uncertain about the best placement for my progress bar component during the API call

Trying to grasp material ui I managed to implement the progress bar. Struggling with loading it until my data is fully loaded. Uncertain about where to place my progress bar component. Could you guide me on how to resolve this issue during API calls, so I ...

javascripthtmlreactjsreduxmaterial-ui

Having trouble dynamically assigning values to the meta tag

When working with Next.js, I am using imported components inside the head tag. import React, { `PureComponent` } from "react"; import Head from "next/head"; class StyleSheets extends PureComponent { constructor(props) { super(pr ...

reactjsnext.js

Updating sessionStorage with setItem will overwrite existing keys

My goal is to store a simple item in sessionStorage. To achieve this, I am using the code sessionStorage.setItem('usr', JSON.stringify(data.user));. However, when I try to save a different key pair using sessionStorage.setItem('u_p', JS ...

reactjssessionstorage