I tried to find a better way to handle the footer on a short page without using extra, unaesthetic markup. I am interested in being truly pedantic. So, discuss:
The easiest option is to allow the background color of the body to go beyond the footer. But, if your footer is different, it may look bad. Simple demonstration
Sticky footers require the addition of a push element that has no semantic meaning. Ugh.
Javascript Absurd.
Some kind of faux columns ? No background images.
Set the background-color for body or html for the color you want the footer in and cover it with the full width wrapper div ( Demo ). I would not have such a wrapper div if I did not want this effect. They do not add semantic meaning.
Hmmm.
I experimented with the new CSS3 flexbox and I combined this .
html{height:100%;} body{display:box; box-orient:vertical; height:100%;} header{height:50px; background:salmon;} section{height:50px; } footer{width:100%; min-height:100px; box-flex: 1; background:lightblue;}
It works exactly as I wish. When the content is too short to cause scroll bars, the footer fills the remaining space, and when there is much more content, it is compressed to min-height (not perfect). He works in WebKit. Firefox does very poorly at display: box . For some reason, you cannot center the display: -moz-box elements. Neither Opera nor IE currently support flexbox. In addition, it gracefully degrades, which is very necessary.
I'm at a dead end. I could scoop up and clutter my markup, accept some nifty degradations in some modern browsers (including only display: -webkit-box , -webkit-box-flex , etc.) or change my design based on CSS limitations, but I I do not want to make any of these compromises. Help me.
source share