为什么最低高度：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>

使用Google Chrome浏览器，我得到了预期的100vh，这意味着整个监视器都充满了我的firstsection。使用Firefox（61.0.2）并非如此-它在中间被切断。所以我的问题是，如何使上面的代码在所有浏览器（或至少是Firefox）中的行为与在Google Chrome中表现出来的行为（使用整个100vh）相同？