2013-03-04 3 views
0

У меня есть следующий код:CSS - не в состоянии заполнить весь экран на андроид после прокрутки

<!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> 

В основном, когда вы загружаете это в первый раз, вы должны увидеть серую зону и черный верхний и нижний колонтитулы. Вы можете прокручивать страницу до верхнего или нижнего конца, и вы всегда будете видеть ТОЛЬКО серая область и черный нижний колонтитул. Белый фон под этими областями никогда не будет раскрыт. Это отлично работает в настольных браузерах.

У меня проблема с этим кодом в родном браузере. Когда страница сначала загружается, все работает так, как ожидалось. Но когда вы прокручиваете нижнюю часть, адресная строка браузера скрывается сама, а затем белый фон отображается как промежуток между серой областью и черным нижним колонтитулом. Как предотвратить появление этого белого фона?

+0

Есть ли у вас селектор сброса CSS? Вы пробовали его в других браузерах, чем в Chrome от Chrome? –

ответ

0

Существует распространенная проблема с Android-браузерами, которая звучит довольно похоже. Проверьте this question и посмотрите, поможет ли это.

Смежные вопросы