unwanted space between content and footer.

[DodgeBox]

Hi there! I am currently working on a website for a project in school but I have a bit of an issue. There is a big gap in between my content and footer and I can’t find the issue. If anyone of you could help me I would very much appreciate it.
Many thanks!

https://codepen.io/DodgeBox/pen/aPNELg

[Shikkediel]

I suspect it comes from using vertical margins, it’s best to avoid them because they can have unexpected results regarding adjacent elements. Which margin is causing it exactly is unclear to me but adding overflow: hidden to #main is a quick solution – and an indication it’s a result of aforementioned margin usage.

[DodgeBox]

I added the overflow: hidden to the main element but it didn’t do anything to the space inbetween the main container and the footer.

[Shikkediel]

Okay, on my screen size it did make a difference but I think that was coincidental. I reckon min-height: 100% on #main is the culprit then.

[DodgeBox]

This indeed helped with the big space in between but now I got a problem with, if I resize the screen to lets say for mobile, the footer comes up and floats under the content but in the middle of the screen and not at the bottom.

[Shikkediel]

So if I understand correctly, you want the footer to be adjacent to div#main whenever the page height is beyond 100% of the screen height but stuck to the bottom when their is room to spare – which means there will be a gap in between.

I’m not sure I can think of a pure CSS way to do that myself…

[DodgeBox]

yes that is indeed what I would like. What other way would I be able to achieve this?

[wolfcry911]

https://css-tricks.com/couple-takes-sticky-footer/

[DodgeBox]

For some reason none of these 5 ways worked. I can’t seem to figure out how since I did exactly what I had to do so I guess something is interfering with it.

[Shikkediel]

That’s a nice link, you weren’t really sticking with the required layout though…

codepen.io/anon/pen/zyBxKm

Edit – by the way, a div element has both width: 100% and display: block as default values so there’s no need to specify it in any additional CSS rules.

Second edit – there seems to still be an unnecessary scrollbar but it’s a step closer at least.

[Shikkediel]

Fixed the second edit above with an overflow: hidden on #main. There’s probably a cleaner way though.

[DodgeBox]

Thank you so much!!! This worked indeed.

[Shikkediel]

Glad to lend a hand. Especially when it revives the memory of some neat CSS I know realise I’d seen before.

[Author]

Posts