iOS 设备上的 100% 高度不起作用答案

【问题标题】：100% Height on iOS device not workingiOS 设备上的 100% 高度不起作用
【发布时间】：2017-02-16 20:45:15
【问题描述】：

我在 html 中这样画一条垂直线：

.vr-long {
  background: #000000;
  border: none;
  width: 1px;
  height: 100%;
}

&lt;hr class="vr-long"&gt;

这适用于所有设备（PC、Android）和所有经过测试的浏览器，但我的 ipad 上的所有浏览器除外（iphone 未测试）。在我的 ipad 上，所有垂直线都消失了。问题似乎是“高度：100%；”因为例如当我使用height: 50px; 时，我得到了那条垂直线。

任何想法如何让height: 100% 在 iOS 上工作？

顺便说一句：当我使用 img-tag 通过使用 repeat-y 和 height: 100% 来绘制垂直线时，同样的问题...

【问题讨论】：

我在示例中看不到您的行，因为您需要为 body 和 html 设置高度 100%。尝试设置 height: 100vh 而不是 100%。如果可行 - 您需要检查 vr-long 的所有父母并将其设置为 height: 100%
height:100vh 有效，但我已经将父母设置为 height:100%。就像我说的，垂直线出现在除 iOS 之外的所有设备上......
这段代码没有复制问题.....所以无法测试
它们也不会出现在我的 MacBook Pro 上。
是的，我想知道stackoverflow.com/a/26145975/470749 上的 100vh 是否有帮助。

【解决方案1】：

我通过使用 div 作为垂直线解决了这个问题。

.vr-long {
  margin: 0 2em 0 2em;
  border: 1px solid #000000;
}

&lt;div class="vr-long"&gt;&lt;/div&gt;

我仍然不知道为什么这个问题只出现在我的 ipad 上，但那个 workaorund 并没有引起任何问题。

【讨论】：