Html 短页面上的页脚，没有超级标记或Javascript

我一直在试图找出最好的方法来处理短页面上的页脚，而不使用多余的、不可靠的标记。我对这件事很感兴趣。那么，让我们来讨论一下：

最简单的选择是允许主体的背景色延伸到页脚之外。但是，如果您的页脚是不同的颜色，这可能看起来很糟糕

需要添加一个没有语义意义的“push”元素。恶心

?？荒谬

什么？没有背景图像

将

正文

或

html

的

背景色

设置为您希望

页脚

的颜色，并使用全宽包装器

div

（）将其覆盖。如果我不想要这种效果，我就不会有那些包装器

div

s。它们没有增加语义

嗯

我一直在试验新的CSS3 flexbox，我已经拼凑了起来

它完全符合我的要求。当内容太短而无法产生滚动条时，页脚会填满剩余的空间，当内容较多时，页脚会缩小到

最小高度（不理想）。它在WebKit中工作。Firefox处理display:box的方式非常奇怪。由于某些原因，无法将
显示：-moz-box
的元素居中。此时Opera和IE都不支持flexbox。而且，它会优雅地退化，这是非常必要的

我陷入了僵局。我可以弄脏和弄乱我的标记，接受一些现代浏览器中的优雅降级（只包括
显示：-webkit-box
，
-webkit-box-flex
，等等），或者基于CSS的限制更改我的设计，但我不想做出任何妥协。帮助我。
如果您愿意在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%;
}

标记没有变化，它应该可以在大多数浏览器中使用

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