将两个全尺寸的div安排在彼此之下

Question

我有两个div，如下：

<div class="div-one">
 <p>Div 1</p>
</div>
<div class="div-two">
 <p>Div 2</p>
</div>

在我的CSS中：

.div-one{
  position: fixed;
  width: 100%;
  min-height: 100%;
}
.div-two{
  position: relative;
  width: 100%;
  min-height: 100%;
}

我想安排这两个div相互吼叫，每个div都占据全屏（想象一个着陆页）。一次只有一个div在屏幕上可见，然后用户可以滚动查看另一个。

我怎样才能做到这一点？

Answer 1

在途中，您可以使用视口相对单位：

.div-one {
  min-height: 100vh;
}
.div-two {
  min-height: 100vh;
}

1vh等于视口高度的1％。 1vw等于视口宽度的1％。 （同样vmin是两个vmax中较小的一个。）大多数但不是所有现代浏览器都支持这些。因此，您可能希望提供合理的回退值：

.div-one {
  min-height: 500px;
  min-height: 100vh;
}
.div-two {
  min-height: 500px;
  min-height: 100vh;
}

你不需要宽度，因为块级元素已经是自动宽度（基本上是100％），如果它们要在页面中正常流动，你可能不想使用定位，在另一个之后。