margin-bottom 和 vh 单位的问题

Question

我有一个应该滚动浏览器窗口的 div。我设置了 73vh 的顶部和 100vh 的边距底部。所以效果应该是，将这个 div 滚动到“浏览器窗口之外”。在 Chrome 中，这就像一个魅力，但在 Firefox 中，margin-bottom 不是窗口高度。

HTML：

<div class="container">
  Hi!
</div>

CSS：

.container {
  position: relative;
  top: 73vh;
  margin-bottom: 100vh;
  background: red;
}

我已经创建了一个代码笔来重现：Code Pen example

在 Chrome 中打开 CodePen，红色框移出视图，在 Firefox 中打开 CodePen，红色框移动了一点。我想要Chrome的效果。

解决方案

基于 fcalderan 的回答：将顶部更改为边距顶部，然后它也适用于 FF。 CodePen

.container {
  position: relative;
  margin-top: 73vh;
  margin-bottom: 100vh;
  background: red;
}

Answer 1

当您将其设为边框底部而不是边缘底部/耸肩/时，它会起作用：

.container {
 position: relative;
 top: 73vh;
 border-bottom: 100vh solid transparent;
 background: red;
 background-clip:padding-box; // credit to @fcalderan
}

链接https://codepen.io/carolmckayau/pen/WapPvE

不是很好，但可以解决。