两个div，一个在另一个之上，两者都有100％的屏幕高度

Question

如果我有一个100％高度的div，我如何将另一个100％高度的div放在原始div的正下方？

第一个div不是位于页面的顶部，而是在滚动后稍微向下。

<div id="section1" style="width: 930px;height: 1000px;position: relative;background-color: red;"></div>

<div id="section2" style="width: 930px;height: 100%;position: absolute;top: 1000px;background-color: blue;"></div>

<div id="section3" style="width: 930px;height: 100%;position: absolute;background-color: green;"></div>

Answer 1

如何使用具有绝对定位的容器div来容纳两个绝对元素？

像这样：

<击> 的 HTML

<击>

<div class="container">
    <div class="lower"></div>
    <div class="upper"></div>
</div>

<强> CSS

.container {
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 600px;
}
.container div {
    position: absolute;
    height: 100%;
    width: 100%;
}

<击>

<强>更新

只需使用两个高度为100vh的常规div元素 - 这意味着100％的视口高度。

<div class="lower"></div>
<div class="upper"></div>

div {
    position: relative;
    height: 100vh;
    top: 100px;
    width: 100%;
}
.upper {
    position: relative;
    background: red;
}
.lower {
    position: relative;
    background: blue;
}

小提琴：http://jsfiddle.net/4x3k9j8r/3/

Answer 2

在这种情况下，您可以使用css calc()功能：

#section3 {
  position: absolute;
  top: calc(1000px + 100%); /* top of #section2 + it's height */ 
  width: 930px;
  height: 100%;
  background-color: green;
}

Demo

更新

中心对齐Demo

{css calc()浏览器支持@ caniuse