html - 短页页脚，无多余标记或 Javascript

Question

我一直在努力找出在不使用多余的、无语义的标记的情况下处理短页面页​​脚的最佳方法。我有兴趣对此非常迂腐。那么，让我们讨论一下:

最简单的选择是允许正文的背景色延伸到页脚之外。但是，如果你的页脚是不同的颜色，这看起来会很糟糕。 Simple Demo

Sticky footers需要添加一个没有语义意义的“推”元素。呸。

Javascript ？荒谬。

某种 faux columns ？没有背景图片。

将 body 或 html 的 background-color 设置为您希望 footer 显示的颜色，并用全宽包装器 div ( Demo )“覆盖它”。如果我不想要这种效果，我就不会拥有那些包装器 div。它们不添加任何语义。

嗯。

我一直在试验新的 CSS3 flexbox，并且拼凑而成 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;}

它完全按照我的意愿工作。当内容太短导致滚动条时，页脚会填充剩余空间，当内容较多时，它会收缩到min-height(不太理想)。它在 WebKit 中有效。 Firefox 对 display: box 的处理非常奇怪。由于某些原因，您无法将 display: -moz-box 的元素居中。 Opera 和 IE 目前都不支持 flexbox。此外，它可以优雅地降级，这是非常需要的。

我陷入了僵局。我可以弄脏我的标记，在一些现代浏览器中接受一些优雅的退化(通过包括 only display: -webkit-box, -webkit-box-flex 等)，或者根据 CSS 的限制更改我的设计，但我不想做出任何这些妥协。帮助我。

Answer 1

如果您愿意在您的 CSS 中使用伪元素，您可以这样做:

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%;
}

标记没有变化，它应该适用于大多数浏览器。