Question

我有一个带有页眉和页脚的文档。而不是使用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>

这可以按预期工作，但如果我添加<!DOCTYPE html>打开HMTL5标准模式，网站会中断（页面会相反滚动，页眉和页脚会滚动，而不是固定）。

我的代码是否存在任何问题，或者是否有更标准的方式来实现我的目标？（不使用position：fixed，当我将我的网站编译成android时不起作用）

Answer 1

基本上使用HTML5标准，文档将扩展以适应内容，并且内容占主体的百分比将没有任何意义，因为文档已经拉伸以适应它。

明确说明html, body {height:100%}，您可以告诉浏览器不调整文档大小，然后根据百分比指定文档是有意义的。

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

Answer 2

使用position:fixed代替position:absolute，但您还需要为其添加正确的元标记：<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" />

相应调整......

导致页眉和页脚中断

2 个答案: