javascript - 根据 chrome 浏览器，mozilla 上的高度显示不相等

Question

我的网页中有三个元素。

1. 高度为 100 像素的“标题”。
2. “内容区域”，高度为 462 像素。
3. 高度为 100 像素的“页脚”。

chrome 上发生的事情已经修复(意味着滚动条是不可见的，这是完美的)但是在 Mozilla 上滚动条是可见的不知道为什么当相同的代码在 chrome 上工作正常时它在 Mozilla 上滚动......下面是我的代码，请帮助我，它几乎总是发生在我身上。

body {
  padding: 0;
  margin: 0;
    }

h1,
h2,
h3 {
  margin: 0;
  padding: 0;
  color: #fff;
}

.header {
  height: 100px;
  background: red;
  width: 100%;
}

.content-area {
  min-height: 462px;
  width: 100%;
  background: grey;
}

.footer {
  height: 100px;
  background: black;
  width: 100%;
}

<header class="header">
  <h1>Header</h1>
</header>
<div class="content-area">
  <h2>content area</h2>
</div>
<footer class="footer">
  <h3>Footer</h3>
</footer>

  

Answer 1

这样试试

.content-area {
  min-height: calc(100vh - 200px);
  width: 100%;
  background: grey;
}

body {
  padding: 0;
  margin: 0;
    }

h1,
h2,
h3 {
  margin: 0;
  padding: 0;
  color: #fff;
}

.header {
  height: 100px;
  background: red;
  width: 100%;
}

.content-area {
  min-height: calc(100vh - 200px);
  width: 100%;
  background: grey;
}

.footer {
  height: 100px;
  background: black;
  width: 100%;
}

<header class="header">
        <h1>Header</h1>
      </header>
      <div class="content-area">
        <h2>content area</h2>
      </div>
      <footer class="footer">
        <h3>Footer</h3>
      </footer>