сделать высоту 100%, когда панель инструментов скрывается в мобильном браузере - PullRequest
Новая
       26

сделать высоту 100%, когда панель инструментов скрывается в мобильном браузере

0 голосов
/ 18 марта 2019

У меня div установлено на position:fixed, которое скользит вниз при нажатии <img>. Когда появляется мой фиксированный div, он отображается в полноэкранном режиме для мобильных браузеров с полной высотой. Однако, когда я прокручиваю, панель инструментов мобильного браузера скрывается, что приводит к тому, что мой фиксированный div перестает быть полноэкранным (в нижней части есть зазор, эквивалентный высоте скрытой панели инструментов).

Изображение панели инструментов:

enter image description here

Я хочу установить высоту этого фиксированного div на 100%, даже если панель инструментов мобильного браузера скрывается.

CSS 

#slider{
   display: none;
   position: fixed;
   z-index: 99999;
   top: 0;
   left: 0;
   height: 100%;
   background: #fff;
   overflow: scroll;
}

HTML 

<body>
    <div id="tick" class="col-md-12">many things</div>
    <div id="slider" class="col-md-12">my slider</div>
</body>

1 Ответ

0 голосов
/ 21 марта 2019

Я решил проблему с помощью некоторых CSS, которые перестают скрывать нижнюю панель инструментов в мобильном браузере.

, когда появляется fixed div, я добавляю 

$('body').css({'overflow':'hidden','position':'fixed'});

и когда скрыть (удалить)этот div затем снова восстанавливают CSS 

$('body').css({'overflow':'','position':''});

Так что, когда мой fixed div появляется, он блокирует тело и даже не прокручивает.Также нижняя панель инструментов мобильного браузера никогда не скрывается, если пользователь примерно прокручивает на fixed div.После этого, когда div hide, состояние тела восстанавливается снова

...