未应用页脚 CSS

当我写这篇文章时，“Hello”一词出现在我的页面顶部而不是底部：

<footer> Hello </footer>

这是我的 CSS 文件的重要部分：

.footer{
    position:fixed;
    bottom:0;
    left:0;
    height:100px;
    background: black;
}

我真的不知道出了什么问题。 我正在工作红宝石 on Rails，我正在使用Pdfkit将我的 html 页面转换为 pdf，但我认为这并不重要。

Demo http://jsfiddle.net/4dgaurav/XtWRv/1/

页脚是 html 中的标签而不是类，所以

footer {
    position:fixed;
    bottom:0;
    left:0;
    height:100px;
    width: 100%;
    background: black;
}