Footer white space below

Footer white space below
0.0 0

#1

Hi there,

I always run into this footer issue,

please see my codepen link - https://codepen.io/nightcoder21/pen/pVOLwy

Here what puzzles me

margin-bottom:0; -I have added this to my footer, i’m no expert but i thought in layman terms there should be NO space below the footer

rather than get the answer,can someone kindly tell me where i have a misunderstanding?

I can never wrap my head around this issue no matter how simple I have tried to make my code

Thanks


#2

There is no space below the footer. However, since your content does not take up the full height of the page, it appears as if there is. Have you thought about using a fixed footer, that is always positioned at the bottom of the page regardless of how much content is present above it?


#3

thanks,actually i thought about that but its not what i was after, i was simply after a footer that “sticks” to the very bottom (sits flush with the end of the page)


#4

Delete the following:

body, html{
    margin:0;
    padding:0;
}

footer {
  background: orange;
  bottom: 0px;
  width:100vw;
  margin-bottom:0;
  
}

and then change the top p element to a main element (to give it more context) and then use the following css:

body {
  display: flex;
  flex-direction: column; /* creates rows out of the elements main and footer */
  height: 100vh; 
  margin:0;
}

main {
  flex: 1 0 auto; /* allows the content to grow but not shrink */
}

footer {
  background: orange;
}