CSS3 alternative for 100% width header/footer with fixed width content

I want to create a header and footer effect like the one that stackoverflow itself uses where the content of each is fixed but the background-color stretches for the width of the screen.

One way to do this is to wrap the header and footer in a container, make the container full width wi开发者_运维百科th the background-color and then set the width of the header and footer themselves to the fixed size.

Here is a demo of how to achieve this effect using containers.

However, I don't like that this forces an extra div into the layout and figured there must be a better way to do this with CSS3.

One option is to use multiple backgrounds but this seems excessive just to set a simple color. Unfortunately, it doesn't seem possible to set multiple background colors.

I've tried playing around with gradients, generated content etc but can't find a solution. Is there anything out there that is better than the extra div?

I only need a solution that works in modern browsers like Firefox and Chrome.

Overview of Solutions

1. CSS Gradients on HTML tag
2. Borders on HTML tag
3. Background-color on HTML/Body tag (only allows for 1 stripe)

Why can't you just set the bg color on body and/or html?

This implementation using border on body doesn't use any CSS3 (it does happen to use HTML5 though). With the negative margins it's probably a bit hacky, but there are fewer elements overall.

Okay I finally worked out how to do this with gradients. I've only tested this in Firefox 4 where it works wonderfully but it should work in 3.6 as well:

html {
  background: -moz-linear-gradient(top, green 50px, transparent 50px),
              -moz-linear-gradient(bottom, green 50px, white 50px);
}

Here is a demo recreating the original layout (make sure you view it in Firefox).

1) we need to have 2 gradients to create the effect, one for the header and one for the footer.

2) The pixel value given to each gradient color specifies where the gradient should start OR stop. This means the first gradient property should be read as "Start a green color from the top of the html element to 50px. Then start a transparent color from 50px to the end".

3) Multiple backgrounds are layered in the order in which they are declared. This means the header gradient will be the length of the html element and will appear on top of the footer gradient. This would obscure the footer gradient so it is necessary for the second color value of the first gradient to be transparent. If you like, you can set the second color value of the second gradient to whatever you want and it will give you a background color. Alternatively, you can just set it to transparent and then set a background-color after the 2nd gradient. There may be some performance cost to rendering transparency although this may be optimized away in this particularly use case.

4) If you want a sticky footer then make sure the html element has min-height:100%.

To prevent you from going insane, you can also use this mixin with sass which should work in Firefox 3.6, Opera/Chrome/Safari Nightly builds and what will probably become the standard syntax.

@mixin stripe($height, $color) {
    background-image: -moz-linear-gradient(top, $color $height, transparent $height), -moz-linear-gradient(bottom, $color $height, transparent $height);
    background-image: -o-linear-gradient(top, $color $height, transparent $height), -o-linear-gradient(bottom, $color $height, transparent $height);
    background-image: -webkit-linear-gradient(top, $color $height, transparent $height), -webkit-linear-gradient(bottom, $color $height, transparent $height);
    background-image: linear-gradient(top, $color $height, transparent $height), linear-gradient(bottom, $color $height, transparent $height);
}

//Example usage
html { @include stripe(50px, green); }