html - 为什么最小高度：100vh；不能在 Firefox 中正常工作？

Question

请考虑以下样式：

#firstsection {
  display: table;
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-image: url(https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&h=350);
  background-position: top;
  background-repeat: no-repeat;
}

#firstsection .firstsection-inner {
  display: table;
  width: 100%;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
}

#firstsection .firstsection-margin-top {
  margin-top: 10%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section id="firstsection">
  <div class="firstsection-inner">
    <div class="container firstsection-margin-top">
      <div class="row">
        <div class="col-md-12">
          <h1>Heading1</h1>
        </div>
        <div class="col-md-12">
          <h2>Heading</h2>
          <div class="row">
            <div class="col-md-4 text-center mb-3">
              <p>
                Some text.
              </p>
            </div>
            <div class="col-md-8">
              <p>
                Some text.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

使用谷歌浏览器，我得到了预期100vh，这意味着整个显示器都充满了我的firstsection. 使用 firefox ( 61.0.2)，它不是 - 它在中间被切断了。所以我的问题是，我怎样才能使上面的代码在所有浏览器（或至少 firefox）中的行为方式与它在 Google Chrome 中的行为方式相同（使用整个100vh）？

标签： htmlcssviewport