Question

我一直试图找出在短页面上处理页脚的最佳方法，而不使用多余的，无意义的标记。我有兴趣对此非常迂腐。那么，让我们讨论一下：

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

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

Javascript？荒谬的。

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

将background-color或body的{{1}}设置为您想要html的颜色，并使用全宽包装器“覆盖它”{{ 1}}（Demo）。如果我不想要这个效果，我就不会有那些包装footer。它们没有添加语义含义。

嗯。

我一直在尝试新的CSS3 flexbox，我拼凑了this。

div

它完全符合我的要求。当内容太短而不能导致滚动条时，页脚会填充剩余的空间，当内容更多时，它会缩小到div（不理想）。它适用于WebKit。 Firefox非常奇怪地处理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的元素居中。 Opera和IE目前都不支持flexbox。而且，它会优雅地降级，这是非常必要的。

我陷入了僵局。我可能会破坏我的标记，在一些现代浏览器中接受一些优雅的降级（仅包括 display: box，display: -moz-box等），或者根据限制更改我的设计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%;
}

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

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

1 个答案: