强制 Div 低于另一个并防止重叠答案

【问题标题】：Force Div below another and prevent overlap强制 Div 低于另一个并防止重叠
【发布时间】：2017-12-31 13:07:00
【问题描述】：

我有两个 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/

【问题讨论】：

标签： css layout html

【解决方案1】：

因为

position:absolute

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

使用这个：

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

JSFiddle

【讨论】：

【解决方案2】：

首先您必须将 html- 和 body-tag 设置为 height: 100%:

html, body {
    height:100%;
}

第二件事，你必须改变的是将第一个 div 的位置设置为“相对”而不是“绝对”（就像在 jsfiddle 文件中一样）：

position: relative;

希望对你有帮助……

编辑：并删除两个 div 之间的<br>-Tag - 如果没有，它们之间会有一个白色的间隙......

【讨论】：

【解决方案3】：

应使用“clear:both”...在 div 标签之间添加以下内容

<style>
.clearfix{
clear:both;
}
</style>
<body>
<div class="clearfix"></div>
<body>

【讨论】：

这不起作用。问题是位置：绝对属性。