Avoid white space between footer and content-CodePudding

Each page of my site has a footer (one for all pages), it has the parameter position: 'fixed'. Accordingly, this means that the footer is always attached to the bottom of the browser, regardless of the screen size and information on the page.

There is also a table on several pages of the site.

The problem is that sometimes a white gap appears between the table and the footer (this happens when testing on screens of different sizes, or simply when changing the browser zoom).

Yes, the most common advice is to add a min-height. And it kind of works. But in this case, with standard screen sizes, the distance between the table and the footer is large (yes, this is not a problem, but it is better to avoid this).

Therefore, I ask for your help in solving the problem.

The code below is responsible for the formation of the page and styles

    export default function Devices() {
  return (
    <div style={styles.Style}>
      <Table />
    </div>
  );
}

.js

.Style {
      padding-left: 8%;
      padding-right: 8%;
      padding-top: 0.5%;
      padding-bottom: 0.5%;
      overflow: hidden;
    }

and the following code forms the footer

export default function Footer() {
  return <Grid container sx={styles.Footer}></Grid>;
}

.js

    const Footer = {
  minHeight: "40px",
  height: "40px",
  backgroundColor: "red",
  borderTop: "2px solid #EAECF4",
  justifyContent: "space-between",
  alignItems: "center",
  paddingLeft: "8%",
  paddingRight: "8%",
  position: "fixed",
  left: "0",
  bottom: "0",
  right: "0"
};

CodePudding user response：

When I have this issue, I just style the body tag to match my main container, and set the min-height to 100vh.

This way the body will be its natural size when you have content, but will always fill the view port regardless of client screen dimensions.

In your example, it’s just

body {
  background: red;
  min-height: 100vh;
}