0

ヘッダーとフッターを含む文書があります。を使用position:fixedする代わりに、ドキュメントの代わりに中央の div がスクロールする 3 つの 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 標準モードを有効にするように追加<!DOCTYPE html>すると、Web サイトが壊れます (代わりにページがスクロールし、ヘッダーとフッターが固定されるのではなく、一緒にスクロールします)。

私のコードに何か問題がありますか、それとも私がやりたいことのより標準的な方法はありますか? （自分のサイトをアンドロイドにコンパイルするときに動作しない position:fixed を使用しない場合）

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 に答える