固定的div在手機屏幕滾動時下降 - html/css

我正在開發一個手機差距應用程序，並在3個Android設備上測試它。有些代碼：固定的div在手機屏幕滾動時下降 - html/css

的主要區域：

<body> 
     <div data-role="page" id="home">   

       <div class="banner"></div> 

       <div id="another_div">Welcome</div> 

       <div class="blank_div"></div> 
       <img src="img/connecting2.png" alt="Loading..." id="loading"/> 

      <div data-role="footer" class="footer_div"> 

      </div><!--Footer-->  
     </div> 
    </body>

一些CSS：

.banner 
{ 
    width: 100%; 
    min-height:40%; 
    max-height:40%; 
    position:fixed; 
    top:0%; 
    display:block; 
    background-color:#FF0; 

} 
#now_play_div 
{ 
    white-space:pre-wrap; 
    font-size:1.5em; 
    position:fixed; 
    height:7%; 
    display:block; 
    background:#FFF; 
    width:100%; 
    text-align:center; 
    top:30%; 
    padding-top:1%; 
    -webkit-marquee: auto medium infinite scroll normal; 
    overflow-x: -webkit-marquee; 

    border-radius:10px; 

} 
.blank_div 
{ 
    width: 100%; 
    min-height:41%; 
    max-height:41%; 
    margin-left:auto; 
    margin-right:auto; 
    display:block; 

} 
.footer_div 
{ 

    color:#FFF; 
    position:fixed; 
    height:10%; 
    display:block; 
    background:#46639d; 
    width:100%; 
    text-align:center; 
    bottom:0px; 
    padding:1%; 
}

現在banner是固定的。使用blank_div，以便我的主要內容不會在固定橫幅下進行。一些工作後，加載圖像將消失並充滿一些動態內容。我可以滾動該內容，但我的橫幅和頁腳已修復。 another_div也是固定的。

該系統在Sony ericsson（android版本：2.3）和symphony（android版本：4.0.4）上完美工作。但無法在Google nexus 7上正常工作（Android：4.3）在nexus中，當我滾動動態加載的blank_div下的主內容時，橫幅開始掉落。 WEIRD !!!!!!當我的內容上升時，橫幅降臨。但在其他兩種設備中，它工作得很好。 有人知道什麼是錯？或者我錯過了什麼？

來源

2013-12-18 AtanuCSE

嘗試給左：0位置。 – Era

@Era工作。剛剛發生了什麼？你能告訴我爲什麼這在Nexus之前沒有奏效嗎？並非常感謝你:) – AtanuCSE

不知道，但有時我們需要在CSS中添加絕對和固定位置所需的所有屬性。 – Era

我想沒有更多的答案會來。所以這裏是我從@ Era的評論中找到的答案。

.banner 
{ 
    width: 100%; 
    min-height:40%; 
    max-height:40%; 
    position:fixed; 
    top:0%; 
    left:0%; 
    display:block; 
    background-color:#FF0; 

}

來源

2013-12-20 17:47:38 AtanuCSE

固定的div在手機屏幕滾動時下降 - html/css

回答

相關問題