CSS -

2013-03-04 1 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 리셋 셀렉터가 있습니까? Android의 Chrome 이외의 다른 브라우저에서 해봤습니까? –

답변

0

안드로이드 브라우저에는 공통점이 있습니다. this question을 확인하고 도움이되는지 확인하십시오.