'Empty white space at the bottom of my react app

Hello I have a problem with the white space at bottom of my website. I checked stackoverflow and tricks like body { padding: 20px } or body { border: 1px solid black} does not work.

Background css (it covers whole page / it should cover whole page but there is a white space at bottom) I also checked if any component in my website has padding but only buttons has paddings and it did not solve problem.

.Background {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(248, 245, 245);
    min-height: 100vh;
    width: 100%;
    background-image: url('../../../images/Storm.jpg');
    object-fit: cover;
    object-fit: fill;
}



@media  screen and  (max-width: 35em)  { 
    .Background {
      height: auto;
        
    }
}

@media  screen and  (max-width: 65em)  { 
    .Background {
       height: auto;
        
    }
}

index.css

 html {
  height: 100%;
  width: 100%;
  font-size: 62.5%;
  box-sizing: border-box;
  margin-bottom: 0;
}

* {
  margin: 0;
  padding: 0;
}

*, 
*::after
*::before {
  box-sizing: inherit;
}

body {
  height: 100%;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  overflow-y: hidden;
  
}

@media  screen and  (max-width: 35em)  { 
  body {
    overflow-y: scroll;
      
  }
}

@media  screen and  (max-width: 62.5em)  { 
  body {
    overflow-y: scroll;
      
  }
}

#root {
  height: 100%;
  width: 100%;
  margin-bottom: 0;
  
  
}



code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
htmlcss


Solution 1:[1]

a simple fix would be to add:

html, body {
    height: 100%;
    width: 100%;
}

Solution 2:[2]

you should add this code:

html, body {
    height: 100vh;
    width: 100vw;
}

or you can also do this:

html, body {
    height: 100%;
    width: 100%;
}

Solution 3:[3]

The best fix will be:

html, body {
height: 100vh;
width: 100vw;
}

Solution 4:[4]

I have no idea why it worked but i added wrapper to the Background with height: 10% and white space disappeared.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mikegross
Solution 2 saleh
Solution 3 Syed Enayet Ali
Solution 4 Kay

Related Questions