снизу фиксированный элемент исчезает на мобильном

Пожалуйста, смотрите на следующей странице на мобильном телефоне:снизу фиксированный элемент исчезает на мобильном

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width"> 
</head> 
<body> 
    <div id="wide">WIDE</div> 
    <div id="fixed">FIXED</div> 
</body> 
</html>

CSS:

#wide { 
    background-color: blue; 
    width: 120px; 
} 

#fixed { 
    background-color: green; 
    position:fixed; 
    left: 0px; 
    bottom: 0px; 
}

Неподвижный элемент есть в нижнем правом углу, как и ожидалось. Тем не менее, когда вы увеличиваете ширину широкого div мимо вашей ширины обозревателя вашего устройства (в пикселях css), фиксированный div исчезает.

Почему это происходит? Есть ли способ предотвратить такое поведение?

Дальнейшие детали:

Простой способ проверить это состоит в использовании мобильный вид в Chrome Devtools, а также изменить ширину непосредственно под Elements> Стили.
Вблизи предельной ширины вы видите фиксированный div, отрезанный горизонтально.
То же самое без meta viewport, но порог будет по умолчанию шириной экрана 980px.
Пробные комбинации height: 100% и min-height:100% на html и body без успеха.
В браузере рабочего стола нет проблем.

источник

2017-01-10 g.kertesz

Не уверен, что это поможет вам, но я добавил display: table-cell; в #wide. Таким образом, ваш div не будет превышать максимальную ширину.

источник

2017-01-10 19:44:53 Michael

Хорошая находка. К сожалению, это не помогает, когда у вас есть фактический широкий контент в первом div (добавьте туда длинный текст). –

Это работает для меня, вот пример: (может быть, я задал ваш вопрос неправильно) https://jsfiddle.net/p5uns2sk/ – Michael

ОК, я вижу. Но ваш текст просто обертывается, он не сделает div шире. Мне нужно иметь там очень широкий контент, который не будет сокращаться или обертываться. Btw Я тестировал с одним длинным словом, без пробелов - отсюда разные результаты. –

Отвечая на мой собственный вопрос здесь.

Я не уверен, почему фиксированный div не отображается. Это как-то связано с тем, что «широкий» div переполняет элемент тела, заставляя вид уменьшаться, а тело заканчивается менее высоким, чем область просмотра. Я по-прежнему считаю, что мобильный браузер должен показывать фиксированный элемент так же, как и браузер для настольных компьютеров.

Мое исправление: оберните широкое содержимое в элемент контейнера с помощью overflow-x: scroll. Это хорошо работает на мобильных устройствах, фиксированный div отображается снова, и широкий контент можно прокручивать.

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width"> 
</head> 
<body> 
    <div id="ctnr"> 
    <div id="wide">WIDE</div> 
    </div> 
    <div id="fixed">FIXED</div> 
</body> 
</html>

CSS:

#ctnr { 
    overflow-x: scroll; 
} 

#wide { 
    background-color: blue; 
    width: 120px; 
} 

#fixed { 
    background-color: green; 
    position:fixed; 
    left: 0px; 
    bottom: 0px; 
}

источник

2017-01-23 14:00:14

снизу фиксированный элемент исчезает на мобильном

ответ

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