CODEWITHSUNDEEP
htmlcss
Uffo
Uffo

Reputation: 10056

Sticky footer problems

I have read a lot on google and here and I can't find a solution, I don't get it why do I get the scroll bar and I need to scroll down in order to see the footer, at this moment I don't have any content and it's not necesary to scroll down, as you can see here: [URL REMOVED], If I remove margin-top fro the logo than it works, but I need that margin-top there.Can you guys help me please to find a solution.

Best Regards.

Upvotes: 0

Views: 185

Answers (1)

Jouke van der Maas
Jouke van der Maas

Reputation: 4338

You gave body a height of 100% and #wrap a min-height of 100%, so the footer is pushed outside of the viewwindow (which is what 100% height is). Try removing or lowering the value of min-height on #wrap and the footer will come up.

Edit: If you're going to use the css from the page you linked, you can't add any vertical margin, padding or borders on anything. You are doing this on #logo and that's what's messing things up.

It seems you're doing this because you want the content to have a certain background, but you don't want this behind the logo. You can solve this by adding another div inside #wrap that wraps the content and give this the background. Leave the header white.

Summary:

  • Remove the margin-top on #logo.
  • Change the margin-bottom on #wrap to -54px.
  • Add a div for the content within #wrap for the background.

That should solve your problem.

Upvotes: 3

Related Questions