如何在移动Safari中修复vh（视口单位）CSS？

Question

我在一个项目中使用了vh（视口单位）的css，但在移动版Safari中它不起作用。似乎Safari不知道如何处理vh，但在其他浏览器中运行良好。我想实现相同的效果，无论是否使用vh，请帮忙解决。顺便说一句，我正在使用facebox。（height:50%不能正常工作）

html:

 <div id="facebox" style="top: 0px; left: 0px; display: block;"> 
       <div class="popup">    
             <div class="body"> 
                  <div class="content_light">
            <div class="Lcontent_left"></div>
                    <div class="Lcontent_right">
                    <div class="Lright_content"></div>
                    </div>
                  </div>
              </div>
       </div>
    </div>

这是我的 CSS：

#facebox .popup {
    display:block;
    position:relative;
margin:auto;
margin-top:0%;
  min-height:100vh;
  height:1px;
  border-radius:5px;
}

    #facebox .body {
  padding:0px;
  display:block;
  position:relative;
  background: #fff;
  width:100%;
  min-height:100vh;
  height:1px;
  margin:auto;
   border-radius:5px;
}
.Lcontent_left{
    position:relative;
    float:left;
    width:100%;
    height:50vh;
    /*min-height:250px;*/
    text-align:center;
    overflow:hidden;
    }
.Lcontent_left_fullscreen{
    display:none;
    }
.Lcontent_right{
    float:left;
    text-justify:inter-word;
    position:relative;
    width:100%;
    height:50vh;
    background-color:white;
    overflow:auto;
    font-family:"Open Sans",Helvetica,sans-serif;
    }
.Lright_content{
    position:relative;
    width:95%;
    margin:auto;
    margin-left:5px;
    overflow:auto;
    height:50vh;
    word-wrap:break-word;
    line-height: 1.5;
    font-size:16px;
    overflow:auto;
}

- Alvaro

Answer 1

有一个非常好的答案在CSS Tricks上 - https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

- user2394342

Answer 2

您可以使用 jQuery 来解决这个问题。

$('container').height($(window).height()/2);

这适用于所有浏览器。希望能有所帮助。

- Koushik Das

---

如果你正在使用React，请不要这样做。 - undefined

Answer 3

今天我尝试了这个只使用CSS的技巧，它能够在iOS 8.2版本的iPhone Safari上正常运行：

html, body {
    ...
    width: -webkit-calc(100% - 0px);
    ...
}

想法: 使用calc函数似乎可以让Safari将单位自动转换为像素(px)。现在我的页面在Chrome和iOS上的Safari中正确地实现了全屏。

- Cris

---

这可能在Firefox、Opera、IE或其他非webkit浏览器上无法正常工作。 - Chloe

Answer 4

我今天遇到了这个修复程序：https://github.com/rodneyrehm/viewport-units-buggyfill 它检查每个元素是否包含vh/vw单位，并将其转换为px。 我认为非常值得一试。

- Rembrand

---

在iOS Safari 10.3上无法运行。https://github.com/rodneyrehm/viewport-units-buggyfill/issues/82 简单的height: 100vh;仍然只有屏幕的1/4大小。在桌面上似乎可以工作（或者什么都不做）。 - Chloe

Answer 5

我也遇到了这个问题，以下是我的解决方案。

这等同于 height:100vh；

document.getElementById("your-element").style.height = window.innerHeight + 'px';

你可以使用下面的代码和jQuery相关：

$('your-element').height(window.innerHeight + 'px');

已在Safari中检查过 :)

- Praneeth Nidarshan

---

由于技术问题，我建议使用jQuery CSS版本： $（“your-element”）.css（“height”，window.innerHeight +“px”）; - r1si

Answer 6

如果你需要在移动浏览器上使用全屏div，请尝试使用固定位置和高度设置为100%的容器。然后将您的弹出窗口设置为100％高度。您可以通过top，left，right，bottom属性以及高度和宽度来调整容器和弹出窗口的位置。这些内容解决了我的问题，我需要在移动chrome上创建一个全屏弹出窗口，并解决了移动浏览器地址栏自动隐藏的问题。

- spaceman

Answer 7

我发现这个库非常有用：https://github.com/Hiswe/vh-check。

它会计算正确vh的偏移量，并将其放入css变量中，所以你可以在css中使用它。

.main {
  height: calc(100vh - var(--vh-offset, 0px));
}

- apptaro

Answer 8

我的版本是“querySelector”，因为：如果我使用元素的类名“getelementbyid”将无法工作。 而且，如果没有连接jQuery库，这种方式js是最通用的。 document.querySelector("your-element").style.height = window.innerHeight + 'px';

- Володимир Хоменко

Answer 9

关于@user2394342的答案。

提供的文章提到了一个干净的CSS解决方案（不需要JS代码），如果您想要填满完整的可用高度（即使用100vh），则可以解决移动webkit浏览器的vh问题：

.my-element {
  height: 100vh; /* for non-webkit browsers */
  height: -webkit-fill-available;
}

- Abid

---

当你使用-webkit-fill-available时，子元素将无法继承父元素的高度。因此，这并不是100vh的一个好替代方案。 - undefined