html - 具有固定宽度内容的 100% 宽度页眉/页脚的 CSS3 替代方案

Question

我想创建一个页眉和页脚效果，就像 stackoverflow 本身使用的那样，其中每个内容的内容是固定的，但背景颜色会延伸到屏幕的宽度。

一种方法是将页眉和页脚包裹在一个容器中，使用背景颜色使容器全宽，然后将页眉和页脚本身的宽度设置为固定大小。

Here is a demo如何使用容器实现这种效果。

但是，我不喜欢这会强制在布局中添加一个额外的 div，并且认为必须有更好的方法来使用 CSS3 来实现这一点。

一个选项是使用多个背景，但这似乎只是设置一个简单的颜色。不幸的是，似乎无法设置多种背景颜色。

我试过使用渐变、生成的内容等，但找不到解决方案。有什么比额外的 div 更好的吗？

我只需要一个适用于 Firefox 和 Chrome 等现代浏览器的解决方案。

解决方案概述

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

Answer 1

为什么不能只在 body 和/或 html 上设置 bg 颜色？