How to fix footer?

Question

I have four panels and currently, I want to fit the panel under the third panel only.

footerRoot: {
        /* textAlign: "center", */
        backgroundColor: theme.palette[0],
        bottom: 0,
        padding: "10px 10px 0px 10px"
}

I have many screens and for now, the footer shows perfectly at the bottom for only three screens while for the rest, the footer shows up abruptly in the middle of the page. How do I alter the code to push it to the bottom of the page on every screen? Note: I want to avoid position: absolute.

Answer 1

I hope this code helps, as it defines the body height to 100% no matter what the content inside it is and pushing the footer contained element to the bottom of the body of the web page and to stretch it across the body width left: 0 and right: 0 would serve the purpose.

body{
  min-height: 100%;
}
.footer{
  position: fixed;
  bottom: 0;
  border: 1px solid #efefef;
  left: 0;
  right: 0;
  text-align: center;
}

<div class="footer">Footer Content goes here</div>