html - 如何将一个 div 放在另一个 div 的正下方？

Question

HTML 是:

<div class="first">
    This is first div. This is first div
    </br>
    </br>
    </br>
    </br>
    </br>
    end
</div>
<div class="second">
    Second starts after first</br>When page is scrolled.
</div>

CSS 部分是:

.first {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    background-color:#000;
    opacity:0.5;
    color:#fff;
}
.second {
    background-color:#F00;
    opacity:1;
    position:absolute;
    left:0px;
    width:100%;
    height:600px;
}

我希望第二个 div 放在第一个 div 之后。第一个<div>会占据全高。这就是我使用 position: absolute 的原因.

另外，我不想写类似 top:600px; 的东西第二名div's CSS，因为当窗口高度降低时，两者之间引入了空白divs .

无论屏幕分辨率如何，如何让它在第一个 div 之后立即启动？

这是 fiddle :http://jsfiddle.net/v8xUL/457/

Answer 1

如果你想让两个 div 显示全高并且它们应该彼此相邻，你需要设置前一个 div 的 height (100%) 作为下一个 div 的 top。您需要为第二个 div 提供 top: 100%。检查一下:

.first {
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  background-color:#000;
  opacity:0.5;
  color:#fff;
}
.second {
  background-color:#F00;
  opacity:1;
  position:absolute;
  left:0px;
  width:100%;
  height:600px;
  top: 100%;
}

<div class="first">
  This is first div. This is first div
  <br />
  <br />
  <br />
  <br />
  <br />
  end
</div>
<div class="second">
  Second starts after first</br>When page is scrolled.
</div>