title: How to push the footer in MUI at the very bottom and make it stick?
body: <pre><code>import * as React from &quot;react&quot;;
  import Container from &quot;@mui/material/Container&quot;;
  import Image from &quot;next/image&quot;;
  import Link from &quot;@/src/Link&quot;;
  import Box from &quot;@mui/material/Box&quot;;
  import Typography from &quot;@mui/material/Typography&quot;;
  import Paper from &quot;@mui/material/Paper&quot;;
  
  export default function GuestFooter() {
    return (
      &lt;Paper sx={{marginTop: 'calc(10% + 60px)', bottom: 0}} component=&quot;footer&quot; square variant=&quot;outlined&quot;&gt;
        &lt;Container maxWidth=&quot;lg&quot;&gt;
          &lt;Box
            sx={{
              flexGrow: 1,
              justifyContent: &quot;center&quot;,
              display: &quot;flex&quot;,
              my:1
            }}
          &gt;
            &lt;Link href=&quot;/&quot;&gt;
              &lt;Image priority src=&quot;/Logo.svg&quot; width={75} height={30} alt=&quot;Logo&quot; /&gt;
            &lt;/Link&gt;
          &lt;/Box&gt;
  
          &lt;Box
            sx={{
              flexGrow: 1,
              justifyContent: &quot;center&quot;,
              display: &quot;flex&quot;,
              mb: 2,
            }}
          &gt;
            &lt;Typography variant=&quot;caption&quot; color=&quot;initial&quot;&gt;
              Copyright ©2022. [] Limited
            &lt;/Typography&gt;
          &lt;/Box&gt;
        &lt;/Container&gt;
      &lt;/Paper&gt;
    );
  }
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/X10b4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X10b4.png" alt="enter image description here" /></a></p>