Question

我的网站上有一个隐藏在较小屏幕上的侧边栏。当用户单击按钮时，它会打开。

侧边栏的内容很长，因此需要可滚动。我用以下方法实现了这个目标：

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 700px;
  min-width: 700px;
  max-height: 100%;
  overflow-y: scroll;

我也在使用flex，所以侧边栏也有这些规则：

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  display: flex;

侧边栏在所有浏览器中都能很好地显示，除非在运行iOS 9的旧iOS设备（chrome或safari）上查看。这些内容的问题在于内容重叠 - 似乎忽略了固定div的高度。

Here is a jsfiddle of the issue

如果我从演示中删除position: fixed，它在iOS中显示正常。或者，如果我删除弹性设置，它也显示正常。它似乎是两者的结合。

我尝试了什么：

height: auto min-height: 100% max-height: 100% height: 100vh
bottom: 0
position: absolute //这不会滚动

如果没有针对此问题的CSS解决方案，可以检查是否正在使用ios设备并应用单独的样式表吗？

任何建议都非常感谢。

完整性HTML：

<div id="sidebar">
  <div class="block">
   text content...
  </div>
<div class="block">
   text content...
  </div>
 ...
</div>

Answer 1

我的解决方案是使用以下方法检测ios：

/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)

然后将侧边栏css更改为display: block

这不是理想的，我仍然不明白为什么iOS在固定和弹性结合方面存在问题...

为什么固定定位在iOS上不适用于flex？

1 个答案: