Question

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

执行此操作的一种方法是将页眉和页脚包装在容器中，使用background-color创建容器的全宽，然后将页眉和页脚的宽度设置为固定大小。

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

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

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

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

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

解决方案概述

Answer 1

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

Answer 2

This implementation using border on body不使用任何CSS3（虽然它确实使用HTML5）。由于负利润率可能有点笨拙，但总体来说元素较少。

Answer 3

好的，我终于找到了如何用渐变来做到这一点。我只在Firefox 4中对它进行了测试，它可以很好地工作，但它也应该在3.6中工作：

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（确保您在Firefox中查看）。

1）我们需要有2个渐变来创建效果，一个用于标题，一个用于页脚。

2）给每个渐变颜色的像素值指定渐变应该开始或停止的位置。这意味着第一个渐变属性应该被读作“从html元素顶部开始绿色到50px。然后从50px开始透明颜色到最后”。

3）多个背景按照声明的顺序分层。这意味着标题渐变将是html元素的长度，并将显示在页脚渐变的顶部。这会使页脚渐变变得模糊，因此第一个渐变的第二个颜色值必须是透明的。如果您愿意，可以将第二个渐变的第二个颜色值设置为您想要的任何颜色，它将为您提供背景颜色。或者，您可以将其设置为透明，然后在第二个渐变后设置背景颜色。渲染透明度可能会有一些性能成本，尽管这可能会在这个特殊用例中进行优化。

4）如果你想要一个粘性页脚，那么确保html元素有min-height:100%。

为了防止你疯狂，你也可以将这个mixin与sass一起使用，它应该适用于Firefox 3.6，Opera / Chrome / Safari Nightly build以及可能成为标准语法的内容。

@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); }

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

3 个答案: