logo标签列表

强制将一个div放置在另一个div下方并防止重叠。

csslayouthtml
11

我有两个Div元素。 第一个应该占据整个屏幕的100％高度和宽度。 我希望第二个Div的宽度为100％，但高度根据内容变化，并且在第一个Div下方开始。 因此，整个屏幕是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/

3个回答
12

因为

position:absolute
使 div 不占据位置，这意味着其他元素在对齐和定位时不会“看到”它们。
使用以下代码：
html,body {
    height:100%;
}
div.div2 {
    top:100%;
}

JSFiddle

2

首先，您必须将html和body标签设置为height: 100%：

html, body {
    height:100%;
}

另外一件需要更改的事情是将第一个div的位置设置为"relative"而不是"absolute"（就像在jsfiddle文件中一样）：

position: relative;

希望能对您有所帮助...

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

1
您应该使用“clear:both”...在div标签之间添加以下内容。
<style>
.clearfix{
clear:both;
}
</style>
<body>
<div class="clearfix"></div>
<body>
这个不起作用。问题在于position: absolute属性。 - FrenkyB
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接