Body, HTML min-height:100% does not get the entire height

Question

I've been trying this approach although I'm facing a problem, I got a ~10px margin on the bottom of my footer. I've been set on both html and body:

html{
  min-height: 100%;
  margin: 0;
  border: 2px dashed blue; 
}
body {
  background: #fafafa;

  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  padding: 0; 
  border: 2px dashed red;
}

But still this is not working out. Ive tryed an approach with overflow:scroll but it gives me an inner scrollbar

*I know theres some related topics here on stackoverflow but none worked to get rid of that white gap"

Thanks!! =)

Remove the `min-height` from the `html` and `body` and try `height:100vh;` on the body. — Jacques, Jun 22 '20 at 15:50

score 0 · Answer 1 · answered Jun 22 '20 at 15:57

0

Try using this approach by removing height: 100% to height:100vh;

height:100vh;

or

min-height:100vh;

So as to sets the background to the full height of the viewport.

answered Jun 22 '20 at 15:57

Heena26

7
4

score 0 · Accepted Answer · answered Jun 22 '20 at 17:06

0

Problem solved.

The issue is, I was setting the footer with a height: 20px; I dont know why but its thinner than it must have to work properly. When I set it thicker like to height: 35px; it works.

answered Jun 22 '20 at 17:06

Guibrother32

33
5

Body, HTML min-height:100% does not get the entire height

2 Answers2