如何在Safari（版本10.1.2）上运行100％的高度

Question

我来找你试图解决我在Safari（版本10.1.2）上经常遇到的问题。每次我必须完全改变我的方法以避免这个问题。但今天我想找到一个解决方案。

我使用 Bulma 作为css，我有一个 100％的高度，不适用于Safari 。我知道其中一个解决方案是给一个二元父母一个固定的高度，但在这种情况下我不想要这个响应。你有另一个解决方案，每个图像大小相同吗？ 您可以在Chrome上打开jsfiddle以查看我想要的结果并在Safari中打开它以了解问题（当然，如果你有最后一个版本，你需要拥有正确版本的safari一个你没有遇到这个问题。）

html：

<div class="columns is-mobile">
  <div class="column is-3-desktop is-3-tablet is-4-mobile">
    <div class="content">
      <img src="https://www.myfrenchstartup.com/logo/51306482cdb15_yummypets2.jpg" alt="">
    </div>
  </div>

   <div class="column is-3-desktop is-3-tablet is-4-mobile">
     <div class="content">
      <img src="https://www.spot-a-shop.fr/images/shops/sportsaventure.png" alt="">
     </div>
   </div>
</div>

css：

body {
  background-color: grey;
}


.content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px;
  width: 100%;
  height: 100%;
  align-items:center;
  background-color: #f0f0f0;
}

JsFiddle：https://jsfiddle.net/12ba8yej/21/

这就是它在safari上的样子：

这就是我想要的：

  

不考虑100％的高度!!!

Answer 1

这是你想要的吗？

body {
  background-color: grey;
}
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px;
  width: 100%;
  height: 100vh;
  align-items:center;
  background-color: #f0f0f0;
}

<div class="columns is-mobile">
    <div class="column is-3-desktop is-3-tablet is-4-mobile">
        <div class="content"> <img src="https://www.myfrenchstartup.com/logo/51306482cdb15_yummypets2.jpg" alt=""> </div>
    </div>
    <div class="column is-3-desktop is-3-tablet is-4-mobile">
        <div class="content"> <img src="https://www.spot-a-shop.fr/images/shops/sportsaventure.png" alt=""> </div>
    </div>
</div>