0

我有一个带有页眉和页脚的文档。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 时它不起作用）

4

2 回答 2

0

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

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

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

于 2013-06-19T23:53:41.260 回答
-1

使用position:fixed而不是position:absolute，但您还必须添加正确的元标记才能使其工作：<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" />

相应调整...

于 2013-06-19T16:50:13.233 回答