CODEWITHSUNDEEP
htmlcss
bookcasey
bookcasey

Reputation: 40483

Footer on Short Page, No Superflous Markup or Javascript

I've been trying to figure out the best way to deal with a footer on a short page without using superfluous, unsemantic markup. I'm interested in being really pedantic about this. So, let's discuss:

The simplest option would be to allow the background color of the body extend beyond the footer. But, if your footer is a different color, this can look bad. Simple Demo

Sticky footers require the addition of a "push" element that has no semantic meaning. Yuck.

Javascript? Absurd.

Some sort of faux columns? No background images.

Setting the background-color of the body or html to the color you want the footer to be, and "covering it up" with a full width wrapper div (Demo). I wouldn't have had those wrapper divs if I didn't want this effect. They add no semantic meaning.

Hmmm.

I've been experimenting with the new CSS3 flexbox, and I've cobbled together this.

html{height:100%;}
body{display:box; box-orient:vertical; height:100%;}
header{height:50px; background:salmon;}
section{height:50px; /*height:2000px;*/}
footer{width:100%; min-height:100px; box-flex: 1; background:lightblue;}

It works exactly as I desire. When the content is too short to cause scrollbars, the footer fills the remaining space, and when there is much more content, it shrinks down to the min-height (not ideal). It works—in WebKit. Firefox handles display: box very strangely. For some reason you can't center elements that are display: -moz-box. Neither Opera nor IE support flexbox at this time. Also, it degrades gracefully, which is very much required.

I'm at an impasse. I could soil and clutter my markup, accept some graceful degradation in some modern browsers (by including only display: -webkit-box, -webkit-box-flex, etc), or change my design based on the limitations of CSS, but I don't want to make any of these compromises. Help me.

Upvotes: 4

Views: 375

Answers (1)

brains911
brains911

Reputation: 1310

If you are willing to use a Pseudo-element in your css you could do this:

footer:after { 
  background: lightblue; /*same color as footer*/
  content: "";   
  margin-top: 100px; /*height of footer. (prevents overlapping footer content)*/
  position: fixed;
  width: 100%;
  height: 100%;
}

No change in markup and it should work in most browsers.

Upvotes: 6

Related Questions