0

私は次のコードを持っています：

<!DOCTYPE html>

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
        #header {position:fixed; height:100px; top:0px; left:0px; right:0px; background:black; color:white;}
        #overlay {position:fixed;  bottom:100px; top:100px; left:0px; right:0px; overflow:auto; background:gray;}
        #footer {position:fixed; height:100px; bottom:0px; left:0px; right:0px; background:black; color:white;}
        body {overflow:hidden;}
        </style>

</head>
        <body>
                <div id="header">header</div>
                <div id="overlay"><?php for($c=0; $c<100; $c++) echo '<p>overlay</p>'; ?></div>
                <div id="footer">footer</div>
                <?php for($c=0; $c<100; $c++) echo '<p>background</p>'; ?>
        </body>
</html>

基本的に、これを初めてロードすると、灰色の領域と黒いフッターとヘッダーが表示されます。ページを上端または下端にスクロールすると、常に灰色の領域と黒いフッターのみが表示されます。これらの領域の下の白い背景は決して露出されません。これはデスクトップブラウザでうまく機能します。

Androidネイティブブラウザでこのコードに問題があります。ページが最初に読み込まれるとき、物事は期待どおりに機能します。ただし、一番下までスクロールすると、ブラウザのアドレスバーが非表示になり、白い背景が灰色の領域と黒いフッターの間のギャップとして表示されます。 この白い背景が表示されないようにするにはどうすればよいですか？

4

1 に答える 1

0

Androidブラウザにはよく似た問題があります。この質問をチェックして、それが役立つかどうかを確認してください。

于 2013-03-04T17:14:00.800 に答える