CSS CSS Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

Chris Davis
Chris Davis
16,277 Points

Sticker footer needed to be altered

After i updated this code the sticky footer was working but it was being pushed about 20px below the bottom of the screen which caused the browser to add a scroll bar in large screen view.

My .wrap css was...

.wrap {
  min-height: calc(100vh - 89px);
}

I checked my footer height in chrome tools and it was in fact 89px tall. I can't understand why it was be pushed down since i was taught that you should subtract the height of the footer from 100% of the viewport height. Anyways i updated my .wrap class through trial and error to...

.wrap {
  min-height: calc(100vh - 112px);
}

and it finally worked as expected. Can anyone shed some light on this? Why did i have to subtract an additional 23px from the .wrap class?

Give this man a cookie! The problem should be fixed

Kai-Ting Lin
Kai-Ting Lin
5,712 Points

I also have the same question and would like have someone to resolve this mystery!

1 Answer

Its the margin of the paragraph that collapse with the .wrap give the .wrap a padding-bottom than the problem is solved.