Исправлена ошибка с падением div при прокрутке на экране мобильного телефона - html / css

Question

Исправлена ошибка с падением div при прокрутке на экране мобильного телефона - html / css

0

Я разрабатываю приложение для телефонного разрыва и тестирую его на 3 устройствах Android. Некоторые коды:

Основная площадь:

<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 используется так, чтобы мой основной контент не blank_div под фиксированный баннер. После некоторой загрузки загрузочное изображение исчезнет и заполнится некоторым динамическим контентом. Я могу прокручивать этот контент, но мой баннер и нижний колонтитул исправлены. another_div тоже исправлено.

Эта система отлично работает на Sony ericsson (версия для Android: 2.3) и симфонии (версия для Android: 4.0.4). Но не работает должным образом в Google nexus 7 (Android: 4.3). В nexus, когда я просматриваю свой основной контент, который динамически загружается только под blank_div, баннер начал падать. WEIRD !!!!!! Пока мое содержание поднимается, баннер падает. Но в других 2 устройствах он работает нормально. Кто-нибудь знает, что случилось? Или что мне не хватает?

AtanuCSE 18 дек. 2013, в 09:11

Источник

1

Попробуйте дать слева: 0 позиции.
richa_pandey 18 дек. 2013, в 07:55
0

@Era Эра Работала. Что сейчас произошло? Можете ли вы сказать мне, почему это не сработало раньше в Nexus? И большое Вам спасибо :)
AtanuCSE 18 дек. 2013, в 07:59
0

Не знаю, но иногда нам нужно добавить все необходимые свойства в CSS для абсолютных и фиксированных позиций.
richa_pandey 18 дек. 2013, в 08:04

Показать ещё 1 комментарий

Теги:

html

android

css

cordova

1 ответ

Ещё вопросы

@Era Эра Работала. Что сейчас произошло? Можете ли вы сказать мне, почему это не сработало раньше в Nexus? И большое Вам спасибо :)
Не знаю, но иногда нам нужно добавить все необходимые свойства в CSS для абсолютных и фиксированных позиций.

AtanuCSE · Accepted Answer · 2013-12-20T16-04-00.000Z

Думаю, больше не ответит. Итак, вот ответ, который я нашел из комментария @Era.

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

}