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

时间:2013-01-02 03:31:38

标签: css layout html

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

3 个答案:

答案 0 :(得分:11)

Becasue

position:absolute

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

使用此:

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

JSFiddle

答案 1 :(得分:1)

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

html, body {
    height:100%;
}

第二件事,你必须改变的是将第一个div的位置设置为“relative”而不是“绝对”(因为它在jsfiddle文件中):

position: relative;

我希望它有所帮助...

编辑: 并删除<br> - 两个div之间的标记 - 如果没有,它们之间会有一个白色的间隙......

答案 2 :(得分:1)

使用应该使用&#34;清除:两者&#34; ...在div标签之间添加以下内容

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