Fixed footer – form elements breaking layout, please help

[matthisco]

Hello,

I am trying to create a fixed blue footer at the base of my site. It works for most pages on my site, but when the content is tables or form elements the blue footer does not appear, if I remove the content, the blue footer displays fine.

Can anyone please tell me how I can fix this? Is it because the form elements are not clearing?

Here is a codepen of my login form, the footer is pink, but I would like it to be blue. If you remove the form you can see the footer display as intended.

http://codepen.io/matthisco/pen/ByGbXL?editors=100

Any help much appreciated.

Thanks

[matthisco]

If I remove the display block from the form labels, the blue footer appears, can anyone please tell me why this happens?

Many thanks

[MattDiMu]

tbh, I haven’t fully understood how it works, but basically your html tag sets the pink bg-color, while the body tag sets the blue bg-color. Usually the footer is blue as the body elementis in front of the html element, but if it’s too small (vertically), the bg-color from the html element is used => pink.

Why? The html element is special in some ways. Its bg-color always covers the whole element. It’s even more special as it as it takes the bg-color of the body, if nothing is defined on itself. So removing the background-color from the html tag will result in the whole page getting blue, where no other background-color is specified. This should work in your case as the rest of the page has own colors anyway.

[Author]

Posts