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; CSS中编写类似div's的内容，因为当窗口高度减小时，会在两个divs之间引入空格。

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

这是小提琴：http://jsfiddle.net/v8xUL/457/

Answer 1

如果您希望让两个div显示为全高，并且它们应该彼此相邻，则需要将前一个div height的{{1}}设置为下一个div＆＃39; s 100%。您需要为第二个div提供top。看看这个：

＆＃13;

top: 100%

＆＃13;

.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%;
}

＆＃13;

Answer 2

删除position:absolute;
Fiddle

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

<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>

它可以是<br>或<br/>

Answer 3

删除position: absolute;

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何将div放在另一个div下面？

3 个答案: