Так что это немного сложнее, потому что, похоже, это происходит не на всех устройствах / браузерах. Однако я знаю, что это происходит при использовании Chrome и использовании мобильного / адаптивного видового экрана Inspect Element.
У меня есть страница фиксированной высоты, которая предназначена для горизонтальной прокрутки, с элементами, расположенными в гибком контейнере (столбец это становится горизонтальным - есть веская причина для этого, поэтому я хотел бы оставить эту часть без изменений, если это возможно). Содержимое переполняется в сторону, и пользователь может затем прокручивать по горизонтали, чтобы увидеть остальные.
У меня также есть position: fixed элементов в каждом углу страницы.
Все это прекрасно работает на для настольных компьютеров, но проблема на мобильных устройствах заключается в том, что, по крайней мере, на Chrome область просмотра «растянута» для размещения переполненного контента. Это означает, что фиксированные элементы теперь находятся за пределами экрана, и страница должна быть прокручена, чтобы добраться до них. Если это не так уж и плохо, растяжение также происходит вертикально, сохраняя соотношение «реального» окна просмотра. Это означает, что теперь страница может быть до смешного прокручена вниз, пока не будут достигнуты фиксированные элементы в нижних углах.
Вот jsfiddle страницы , так что вы можете увидеть, что я делаю, хотя вопрос не покажет. Вам нужно будет загрузить код в браузер самостоятельно, чтобы увидеть проблему, поэтому я вставил его ниже.
Если вы хотите увидеть, как страница должна вести себя на мобильном телефоне, посмотрите эту версию jsfiddle , предназначенную только для результатов, и просмотрите ее в мобильном окне просмотра элемента проверки Chrome. Я подозреваю, что это работает только из-за iframe jsfiddle.
Заранее благодарим за любую информацию или помощь.
body{
margin: 0;
}
header .left{
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 8rem;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.5rem 1.5rem 1rem;
z-index: 5;
pointer-events: none;
}
header .top{
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 1.5rem;
padding-left: 9.5rem;
display: flex;
justify-content: space-between;
background: white;
z-index: 3;
}
header .top > div{
display: flex;
position: relative;
}
header .top > .header{
width: 100%;
display: flex;
padding-right: 3rem;
background: white;
}
.index{
height: 90vh;
width: auto;
padding-bottom: 0.5rem;
display: flex;
flex-flow: column wrap;
align-items: flex-start;
}
.element{
background: grey;
padding: 30vh;
margin: auto 5rem;
position: relative;
}
.bottomright{
position: fixed;
bottom: 1rem;
right: 1.5rem;
}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="site">
<header>
<div class="left">
<div class="corner">
Top left
</div>
<nav>
Bottom left
</nav>
</div>
<div class="top">
<div class="header">
Header
</div>
<div class="corner">
Top right
</div>
</div>
</header>
<main class="index">
<div class="element">
1
</div>
<div class="element">
2
</div>
<div class="element">
3
</div>
<div class="element">
4
</div>
<div class="element">
5
</div>
<div class="bottomright">
Bottom right
</div>
</main>
</div>
</body>
</html>