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

Question

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

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

粘滞页脚需要添加一个没有语义含义的"推"元素.呸.

Javascript？荒诞.

某种人造柱？没有背景图片.

设置background-color的body或html你想要的颜色footer要和全宽包装"覆盖起来" div(演示).div如果我不想要这个效果,我就不会有那些包装器.它们没有添加语义含义.

嗯.

我一直在试验新的CSS3 flexbox,我拼凑了这个.

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.而且,它会优雅地降级,这是非常需要的.

我陷入了僵局.我能土壤和杂波我的标记,接受一些现代浏览器的一些优雅降级(通过包括只 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%;
}

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