Question

我有一个div，他应该在浏览器窗口上滚动。我将顶部设置为73vh，将底部设置为100vh。因此效果应该是，将该div“滚动到浏览器窗口之外”。在Chrome浏览器中，它的作用就像是一种魅力，但在Firefox中，底边距不是窗口高度。

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的答案：将top更改为margin-top，然后它也适用于FF。 CodePen

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

Answer 1

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

.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

不好，但是可以解决。

底边和vh单位有麻烦的地方

1 个答案: