css - 强制 Div 在另一个下方并防止重叠

Question

我有两个 Div 元素。第一个应该是屏幕的 100% 高度和宽度。我希望第二个 Div 宽度为 100%，但高度可变，具体取决于内容并开始内联(在第一个下方)。所以全屏是 Div 1，你必须向下滚动才能看到 Div 2。但我尝试过的所有内容都重叠了。

<div style="background-color:red;height:100%;width:100%;left:0px;top:0px"></div>
<br/>
<div style="width:100%;position:relative;background-color:yellow">
      <br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>..
</div>

http://jsfiddle.net/FBJ8h/

Answer 1

因为

position:absolute

使 div 不被占用，这意味着其他元素在对齐和定位时不会“看到”它们。

使用这个:

html,body {
    height:100%;
}
div.div2 {
    top:100%;
}

JSFiddle