Css 导致页眉和页脚断开

我有一个带页眉和页脚的文档。我没有使用position:fixed，而是使用3个div，中间的div滚动，而不是文档。下面是我的代码：

<style> 
html{ 
    overflow:hidden; 
    font-size: 80px;
} 
.content{ 
    display:block; 
    top:10%;
    position:relative;
    overflow:auto;
    width:100%; 
    height:80%; 
} 
.header{position:absolute;top:0;} 
.footer{position:absolute;top:90%;} 
</style> 
<div class="header">Hover</div> 
<div class="content"> 
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
    lorem ipsum <br />
</div> 
<div class="footer">Hover</div> 

这和预期的一样，但是如果我添加打开HMTL5标准模式，网站会破坏页面滚动，页眉和页脚也会随之滚动，而不是被修复

我的代码有什么问题吗，或者我想做的事情有没有更标准的方法？不使用position:fixed，当我将我的站点编译为android时，它不起作用

使用position:fixed而不是position:absolute，但是您还必须添加适当的meta标记，它才能起作用：

---

相应地调整…

基本上使用HTML5标准，文档将拉伸以适应内容，而内容占正文的百分比将毫无意义，因为文档已经拉伸以适应它

通过显式地说html，body{height:100%}，您可以告诉浏览器不要调整文档的大小，然后根据百分比指定它是有意义的

---

感谢@Pete和@t.niese提供了答案，但只是在评论中这样做了

您可能需要添加html，body{height:100%}请使用缩进，尤其是当您与他人共享您的工作时。正如Pete所说，您需要设置html和body的高度，否则body具有内容的高度，因此%的高度和位置将不起作用，对于正文中的元素，按照您所期望的方式执行。@mohammad areeb siddiqui我不能使用JSFIDLE，因为这会将页面设置为html5标准模式。@Pete yep将文档高度设置为100%似乎已经解决了这个问题。如果你想回答，我会接受。我有几乎相同的元标签，唯一的区别是我的宽度是设备宽度，而不是100%。标题在大多数情况下都有效，但一旦显示/隐藏元素，它就会中断。